CSS, без сомнения, является одним из самых важных языков разметки, которые мы используем. И хотя HTML описывает структуру документа, ее поведение может быть непредсказуемым, в зависимости от версии браузера. CSS – это тот инструмент, который позволит нам исправить все несоответствия в отображении страницы, а также оформить ее внешний вид.
Прячем текст с помощью абзацаТакой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1 . Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку.
H1 { text-indent:-9999px; margin:0 auto; width:400px; height:100px; background:transparent url("images/logo.jpg") no-repeat scroll; }
Стилизация ссылок в зависимости от формата файлаЭтот пример направлен на улучшение пользовательского интерфейса. Зачастую в интернете, мы переходим по ссылкам, абсолютно не зная куда они ведут. Следующий фрагмент кода используется для отображения небольших иконок рядом со ссылками. Такие картинки будут подсказывать пользователю, что это внешняя ссылка, электронный адрес, pdf-файл, картинка и т.д.
/* внешняя ссылка */ a{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* электронная почта */ a{ padding-right: 20px; background: url(email.png) no-repeat center right; } /* pdfs */ a{ padding-right: 20px; background: url(pdf.png) no-repeat center right; }
Удаляем полосы прокрутки многострочного поля в IEInternet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода:
Textarea{ overflow:auto; }
БуквицаНа сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах.
P:first-letter{ display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px; font-family:Georgia; }
CSS-прозрачностьПрозрачность – это свойство, которое разным браузерам, назначается по-разному. С помощью следующего фрагмента кода, вы сможете назначить прозрачность всем браузерам сразу.
Transparent { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }
CSS Reset от Эрика МейераФактически, css-reset , предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве.
Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need "cellspacing="0"" in the markup */ table { border-collapse: collapse; border-spacing: 0; }
Предзагрузчик картинокИногда бывает полезно предварительно загрузить ваши картинки, с тем чтобы исключить задержку и мерцание при доступе к нужному элементу.
Div.loader{ background:url(images/hover.gif) no-repeat; background:url(images/hover2.gif) no-repeat; background:url(images/hover3.gif) no-repeat; margin-left:-10000px; }
Простой css-спрайт для кнопкиНаличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon , на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение.
A { display: block; background: url(sprite.png) no-repeat; height: 30px; width: 250px; } a:hover { background-position: 0 -30px; }
Google Font APIНе так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать .
Inconsolata:italic|Droid+Sans"> body { font-family: "Tangerine", "Inconsolata", "Droid Sans", serif; font-size: 48px; }
Хаки для различных браузеровИногда бывает полезно исправить баг у конкретного браузера, и условные комментарии не всегда являются лучшим решением для этого. Этот список браузерных хаков от Криса Койера, поможет вам назначить нужные свойства для определенных браузеров, посредством простого css.
/* IE 6 */ * html .yourclass { } /* IE 7 */ *+html .yourclass{ } /* IE 7 and modern browsers */ html>body .yourclass { } /* Modern browsers (not IE 7) */ html>/**/body .yourclass { } /* Opera 9.27 and below */ html:first-child .yourclass { } /* Safari */ html body:last-child .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:nth-of-type(1) .yourclass { } /* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */ body:first-of-type .yourclass { } /* Safari 3+, Chrome 1+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .yourclass { } }
Фиксированный подвалВозможно, вы подумаете, что создать подвал, всегда приклеенный к низу экрана, это сложная задача. Однако, это совсем не сложно, если вам нужен простой подвал. Здесь нам придется использовать небольшой хак для IE6, но в остальном, это очень легко.
#footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } /* IE 6 */ * html #footer { position:absolute; top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop: document.body.scrollTop))+"px"); }
Поворот изображенияВращение картинки может оказаться весьма полезным, особенно если его можно использовать вместо загрузки новой, предварительно развернутой картинки. Предположим, вы хотите использовать только одну картинку для стрелки, но у вас на странице их несколько, причем развернутых в разные направления. Вот решение вашей проблемы:
Img.flip { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }
ClearfixНе так давно, кто-то решил, что пришло время очищать поток от флоатов, не добавляя дополнительной разметки к документу. В результате этого решения, был создан класс, который можно применять к контейнеру, содержащему плавающие элементы, для их очистки. Это очень удобный, и широко распространенный способ на сегодняшний день.
Clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-block; } /* start commented backslash hack */ * html .clearfix { height: 1%; } .clearfix { display: block; } /* close commented backslash hack */
Закругленные углыС постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9.
Round{ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* future proofing */ -khtml-border-radius: 10px; /* for old Konqueror browsers */ }
Переопределение стилейМеня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях.
P{ font-size:20px !important; }
Font faceFont-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face .
@font-face { font-family: "Graublau Web"; src: url("GraublauWeb.eot"); src: local("☺"), url("GraublauWeb.woff") format("woff"), url("GraublauWeb.ttf") format("truetype"); }
Центрирование сайтаРаспространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто.
Min-height в IEЭтот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг.
Box { min-height:500px; height:auto !important; height:500px; }
Загрузка картинкиЭтот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок.
Img { background: url(loader.gif) no−repeat 50% 50%; }
Вертикальное центрированиеЭто небольшой фрагмент кода, позволит вам вертикально центрировать содержимое контейнера, без использования дополнительной разметки. Вам понадобится просто отобразить контейнер в качестве ячейки таблицы, а затем задать значение атрибуту vertical-align .
Container { min-height: 10em; display: table-cell; vertical-align: middle; }
Создаем врезыДля начала, давайте разберемся, что же такое врез? Врезы обычно встречаются на новостных ресурсах и сайтах-журналах, в виде небольшого блока текста, расположенного внутри статьи, иногда в них размещаются мнения людей или цитаты. Вы будете рады узнать, что их очень легко сделать, и при правильном использовании, врезы могут значительно улучшить восприятие статьи пользователем.
Pullquote { width: 300px; float: right; margin: 5px; font-family: Georgia, "Times New Roman", Times, serif; font: italic bold #ff0000 ; }
Выделение текстаНе все знают о том, что существует возможность изменить цвет выделенного в браузере текста. Для этого потребуется всего два селектора.
::selection { color: #000000; background-color: #FF0000; } ::-moz-selection { color: #000000; background: #FF0000; }
Добавляем разрыв страницыЭтот пример, снова направлен на улучшения пользовательского интерфейса, при выводе на печать. Например, при печати статьи, возможно будет полезно отделить комментарии от текста статьи, и перенести их на отдельную страницу. Если добавить класс.page-break к блоку комментариев, то все комментарии, при печати, будут выведены на отдельной странице. И вообще, этот класс можно использовать в любом месте вашего сайта.
Page-break{ page-break-before:always; }
Не в первый раз замечаю, что при использовании CSS-трансформаций, некоторые элементы на странице в Safari таинственным образом меняют свои свойства. В других браузерах подобное наблюдается значительно реже.
Особенно заметны такие артефакты когда трансформация стоит на псевдоклассе :hover , т.е срабатывают при наведении мыши на элемент. В моём случае увеличение кнопки .btn при наведении на неё мыши, перманентно вызывало изменение типа сглаживания текста в соседних блоках.
Btn { transition: all .2s ease-in-out; } .btn:hover { transform: scale(1.1); }
Проблема связана с нехваткой ресурсов для рендеринга, и довольно легко лечится.
Translate3DСамый простой способ решения задачи - это активизация аппаратного ускорения, которое для двухмерной анимации в CSS по-умолчанию отключено. Для этого просто создаём пустую 3D-анимацию.
Webkit-transform: translate3d(0,0,0);
Всё, но это костыль.
Will-ChangeВ CSS существует относительно новое и пока малоизвестное свойство will-change , которое заранее передаёт браузеру информацию о возможном предстоящем изменении того или иного элемента. Например, если элемент планируется трансформировать, об этом можно предупредить браузер, чтобы он приберёг силы, как говорится. В случае с вышеупомянутой кнопкой, выглядит это так:
Btn { transition: all .2s ease-in-out; will-change: transform; }
Если планируется изменение нескольких параметров, их можно задать последовательно через запятую. Например, для трансформации с изменением прозрачности:
Will-change: transform, opacity;
Таким образом, браузер сможет заранее подготовиться к тяжёлой обработке и оптимизировать использование ресурсов. Что позволит избежать появления на странице различных побочных эффектов.
Подпишитесь на мой телеграм и первыми получайте новые материалы, в том числе которых нет на сайте.
Прежде чем разбираться с кнопками, рассмотрим общие для всех них установки.
HTMLДля кнопок будет использоваться очень простой HTML код:
Подписаться
CSSТакже все кнопки будут иметь общие установки для текста надписи и отмену выделения ссылок:
ButtonText { font: 18px/1.5 Helvetica, Arial, sans-serif; color: #fff; } a { color: #fff; text-decoration: none; }
Обычно, пользователь ожидает достаточно мягкого эффекта при навдении курсора мыши на ссылку или кнопку. А в нашем случае кнопка меняет размер - она увеличивается, показывая дополнительное сообщение.
Основной код CSSДля начала нам нужно только задать кнопке форму и цвет. Определяем высоту 28px и ширину 115px, добавляем поля и отступы, а также задаем кнопке светлую рамку.
#button1 { background: #6292c2; border: 2px solid #eee; height: 28px; width: 115px; margin: 50px 0 0 50px; padding: 0 0 0 7px; overflow: hidden; display: block; }
Эффекты CSS3Некоторым людям нравится, когда простая кнопка сопровождается достаточно большим кодом CSS. В данном разделе приводятся дополнительные стили CSS3 для нашей кнопки. Вполне можно обойтись и без них, но они придают кнопке более современный вид.
Округляем углы рамки и добавляем градиент. Здесь используется небольшой трюк с темным градиентом, который взаимодействует с любым цветом фона.
/*Скругленные углы*/ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Анимация CSSТеперь установим переход CSS. Анимация будет использоваться для любых изменений свойств и длиться полсекунды.
Наведение курсора мышиОсталось только добавить стиль для расширения кнопки при наведении курсора мыши на нее. Кнопка должна иметь ширину 230px для отображения всего сообщения.
#button1:hover { width: 230px; }
Простое изменение тональности цвета
Очень простой и популярный эффект CSS для кнопки. При наведении курсора мыши плавно меняется тональность фонового цвета.
Основной код CSSКод CSS очень похож на предыдущий пример. Используется другой цвет фона и немного изменена форма. Также центрируется текст и установлена высота строки для кнопки, чтобы происходило вертикальное центрирование.
#button2 { background: #d11717; border: 2px solid #eee; height: 38px; width: 125px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 38px; }
Эффекты CSS3Устанавливаем скругление углов, градиент для фона и дополнительную тень. С помощью rgba делаем тень черной и прозрачной.
/*Скругленные углы*/ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSSАнимация практически не отличается от предыдущего примера.
/*Переход*/ -webkit-transition: All 0.5s ease; -moz-transition: All 0.5s ease; -o-transition: All 0.5s ease; -ms-transition: All 0.5s ease; transition: All 0.5s ease;
Наведение курсора мышиПри наведении курсора мыши будет устанавливаться другой цвет фона. Попробуйте выбрать более светлый вариант цвета в Photoshop, чтобы получился отличный эффект.
#button2:hover { background-color: #ff3434; }
Данный эффект может получиться весьма впечатляющим в зависимости от выбора фонового изображения. В демонстрации используется невзрачный фон и эффект выглядит невзрачно. Попробуйте использовать другую картинку и может получиться ошеломляющий эффект.
Основной код CSSОсновная часть кода не отличается от предыдущих примеров. Обратите внимание на то, что мы используем фоновое изображение. Начальное положение фона установлено в "0 0". При наведении курсора положение сдвигается по вертикали.
#button3 { background: #d11717 url("bkg-1.jpg"); background-position: 0 0; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3В данном примере нет ничего особенного - скругленные углы и тени.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);
Анимация CSSАнимация для данного случая длится дольше, чтобы создать плавный и интересный эффект.
/*Переход*/ -webkit-transition: All 0.8s ease; -moz-transition: All 0.8s ease; -o-transition: All 0.8s ease; -ms-transition: All 0.8s ease; transition: All 0.8s ease;
Наведение курсора мышиТеперь пришла пора сдвигать фоновое изображение. Начальное положение было "0 0". Устанавливаем второй параметр в значение 150px. Для сдвига по горизонтали требуется изменить первый параметр.
#button3:hover { background-position: 0px 150px; }
3D имитация нажатия кнопки
Последний пример в нашем уроке посвящен популярному методу 3D имитации нажатия кнопки при наведении на нее курсора мыши. Анимация для данного случая настолько проста, что даже не требуется задавать переход CSS. Но конечный результат получается вполне впечатляющим.
Основной код CSSКод CSS для нашей кнопки.
#button4 { background: #5c5c5c; text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); font-size: 22px; height: 58px; width: 155px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; }
Эффекты CSS3В данном случае CSS3 перестает быть приятным опционом. Для получения эффекта требуются тени и градиент. Резкая тень создает видимость 3D кнопки.
/*Скругленные углы*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; /*Тень*/ -webkit-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 6px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
Наведение курсора мышиВ данном случае мы имеем самую большую секцию hover . Длина тени уменьшается, и с помощью полей создается смешение темной зоны. Все вместе создает иллюзию нажатия кнопки. Переворот градиента усиливает эффект.
#button4:hover { margin-top: 52px; /*Тень*/ -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8); /*Градиент*/ background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4)); }
Всем, доброго времени суток. Давным давно я публиковала пост как блога. Сегодня под настроения захотелось ещё заняться его дизайном. Сам родной гаджет об авторе ну совсем скучный и не привлекательный.
В результате получилось создать индивидуальный стиль, под собственный дизайн вполне симпатичный и информативный, скорее всего даже не виджет, а карточку - профиля. Так её назовём. Ну вот как - то так примерно
Рабочий вариант на тестовом блоге в сайдбаре в самом низу
Что на ней присутствует
1. Ваша фотография профиля.
2. Красивый дизайн самой карты, который легко настраивается
3. Ваш ник, имя или фамилия
4 Можно указать род занятий, хобби
5.Добавим 2 кнопки на нужные страницы. Это могут быть ссылки на вашу полную страницу об авторе, на главную страницу, карту, мастер классы, на паблики в социальных сетях. Всё что угодно.
6. Карточка прекрасно впишется в боковой панели блога.
Скопируйте, приведённый ниже код и будем ваять именно вашу карту профиля дальше.
![](https://b-luxe.ru/wp-content/uploads/2024/04/" alt=)
" alt="profile" class="profile" />
Вика Барад
Блоггер
мой блогГруппа в ВК
.snip1 {
font-family: "Roboto", Arial, sans-serif;
color: #fff;
position: relative;
overflow: hidden;
margin: 10px;
min-width: 230px;
max-width: 315px;
width: 100%;
color: #ffffff;
text-align: left;
line-height: 1.4em;
background-color: #141414;
}
.snip1 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease;
transition: all 0.25s ease;
}
.snip1 img {
max-width: 100%;
vertical-align: top;
opacity: 0.85;
}
.snip1 figcaption {
width: 100%;
background-color: #141414;
padding: 25px;
position: relative;
}
.snip1 figcaption:before {
position: absolute;
content: "";
bottom: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 55px 0 0 400px;
border-color: transparent transparent transparent #141414;
}
.snip1 figcaption a {
padding: 5px;
border: 1px solid #ffffff;
color: #ffffff;
font-size: 0.7em;
text-transform: uppercase;
margin: 10px 0;
display: inline-block;
opacity: 0.65;
width: 47%;
text-align: center;
font-weight: 600;
letter-spacing: 1px;
text-decoration: none;
}
.snip1 figcaption a:hover {
opacity: 1;
}
.snip1 .profile {
border-radius: 50%;
position: absolute;
bottom: 100%;
left: 25px;
z-index: 1;
max-width: 90px;
opacity: 1;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.snip1 .follow {
margin-right: 6%;
border-color: #2980b9;
color: #2980b9;
}
.snip1 h2 {
margin: 0 0 5px;
font-weight: 300;
}
.snip1 h2 span {
display: block;
font-size: 0.5em;
color: #2980b9;
}
.snip1 p {
margin: 0 0 10px;
font-size: 0.8em;
letter-spacing: 1px;
opacity: 0.8;
}
.snip1:hover:before,
.snip1.hover:before {
bottom: 0;
box-shadow: 0 0 0px white;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
$(".hover").mouseleave(
function () {
$(this).removeClass("hover");
}
);
https://w-dog.ru/wallpapers/10/19/380923269777589.jpg - это адрес картинки - фона в верхней части
https://lh3.googleusercontent.com/a-/AAuE7mA2BanaiBKNuN8BR_ECcqksSRfEzyzRUwTkbQwKqw=s96-cc - адрес вашей миниатюры. Его можно скопировать в вашем профиле Гугл или установить другой аватор.
В строках отмеченных розовым цветом пишите свой ник, имя, занятие и пояснительный текст.
Соответственно, то что выделено зелёным это адреса страниц на которые будет переход при нажатии на кнопку.
Основной фон карточки профиля я тоже отметила цветом в нескольких местах #141414;
Настройки самые элементарные и не думаю, что могут возникнуть вопросы. Если будут - пишите в комментариях. Разберёмся.
Готовый код виджета устанавливаем в разделе ДИЗАЙН - гаджет HTML/JavaScript
в боковой панели блога. Кстати, думаю, что она не плохо будет смотреться и вверху, когда у пользователя есть возможность сразу познакомиться с автором. Фон и картинку можно легко менять в зависимости от вашего настроения или времени года. Она всегда будет новой. Ну это на ваше усмотрение.
Всем добра и удачи.
Loading...