Использование CSS классов – удобный путеводитель. Css класс изображения wordpress
4 симпатичных CSS-эффекта для изображений
Когда-то мы использовали исключительно Photoshop для создания симпатичных графических эффектов. В настоящее время мы можем использовать чистый CSS для этих целей. Данный подход делает очень гибким процес создания дизайна, который легко настроить и изменить в любое время.
Сегодня я расскажу вам, как создать несколько очень простых и симпатичных CSS-эффектов для изображений, например, полароид или виньетку.
Полароид
Демо: на Tinkerbin.
Наш первый эффект представляет собой создание изображения в виде фото полароид. Используя разные размеры границы, мы можем легко создать белую рамку, которая повторяет стиль, характерный для мгновенного фото, популярный несколько десятилетий назад.
Правда, мне этот эффект очень не нравится, но мне кажется, что вы сможете придумать ему достойное применение.
HTML
Для этого эффекта применим к div-у класс "polaroid". А внутрь его поместим изображение и текст. Я буду использовать изображение 200px на 200px (это важно).
<div> <p>Сара, Дек '02</p> <img src="/200/200/people/1.jpg" /></div>
Обратите внимание, в демо-примере выше, мы использовали пользовательский рукописный шрифт. Этот шрифт называется Kaushan. Чтобы использовать его, добавьте этот фрагмент кода между тегами head на вашей HTML-странице.
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
CSS
Теперь перейдем к CSS. Для класса polaroid, мы установим position: relative и ширину 220px. Относительное позиционирование здесь важно, потому что мы будем использовать абсолютное позиционирование для текста.
Далее, мы будем создавать границы для эффект полароида. Вместо того, чтобы применять стили к каждой границе до отдельности, мы установим единую границу 10px вокруг изображения, а затем переопределим стили для нижней. В нижней части граница толще, чем остальные, нам нужно установить ширину границы 45px. Я также применил box-shadow.
.polaroid { position: relative; width: 220px;} .polaroid img { border: 10px solid #fff; border-bottom: 45px solid #fff; -webkit-box-shadow: 3px 3px 3px #777; -moz-box-shadow: 3px 3px 3px #777; box-shadow: 3px 3px 3px #777;} .polaroid p { position: absolute; text-align: center; width: 100%; bottom: 0px; font: 400 18px/1 'Kaushan Script', cursive; color: #888;}
Множественная рамка
Демо-пример: на Tinkerbin.
Есть несколько способов, с помощью которых можно сделать множественную рамку на CSS. Один из самых простых и самых популярных способов выполнения данного трюка в том, чтобы использовать box-shadow с разными установками.
HTML
HTML-код очень прост для этого примера. На самом деле, div здесь не обязателен. Если вы используете только одно изображение, вы можете отказаться от обертки и применять класс прямо к изображению.
<div> <img src="/400/200/nature/1.jpg" /></div>
Как работает тень
Прежде чем прейдем к нашему примеру, давайте рассмотрим как тени работают. Хотя мы обычно устанавливаем только четыре значения для этого свойства, на самом деле их шесть:
box-shadow: inset x y blur spread color;
Inset создает внутреннюю тень (мы будем использовать это позже), х устанавливает горизонтальное смещение, у задает вертикальное смещение, blur определяет, насколько размытая будет тень и spread, как далеко тень будет распространяться. Тень, которую мы использовали в предыдущем примере выглядит следующим образом:
box-shadow: 3px 3px 3px #777;
Этот код устанавливает offsets и blur равным 3px и цвет #777, распространение не определено. Теперь давайте начнем работать с нашим примером:
.multiple-borders { box-shadow: 0px 0px 0px 7px #000;}
Как видите, у нас не установлено смещение и нет размытия, а spread равен семи пикселям. В результате, тень выглядит так же, как черная рамка шириной семь пикселей.
Чтобы добавить вторую тень, все что нужно сделать - это вставить запятую, а затем повторить те же параметры, только изменив немного значения. На этот раз я установил первый spread равный 5px (черный), а второй - равный 10px (белый).
.multiple-borders { box-shadow: 0px 0px 0px 5px #000, 0px 0px 0px 10px #fff;}
Результат должен выглядеть как две рамки по 5px, одна черная и одна белая.
CSS
Теперь вы знаете суть того, как работают тени, пришло время реализовать наш эффект. Неудобство состоит в том, что мы должны использовать три различные версии одного и того же кода, для поддержки всех браузеров.
.multiple-borders { -webkit-box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555; -moz-box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555; box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.6), 0px 0px 0px 14px #fff, 0px 0px 0px 18px rgba(0,0,0,0.2), 6px 6px 8px 17px #555;}
Виньетка
Демо-пример: на Tinkerbin.
На этот раз мы собираемся использовать другой тип box-shadow, чтобы создать очень необычный эффект. Используя параметр "inset" для тени, мы можем создать такой красивый эффект а-ля Photoshop, как виньетка, используя только CSS.
HTML
На этот раз нам нужен пустой div. При желании можно разместить текст внутри, но изображение должно быть вставлено с помощью CSS. Потому что внутренняя тень будет появляться под содержанием вставленным в HTML-код, а это означает, что изображение будет скрывать её полностью.
<div></div>
CSS
В CSS нам нужно установить изображение как фон, а затем определить ширину и высоту div-a. После этого настало время применить тени. Обратите внимание, что в значении inset установлено как вертикальное, так и горизонтальное смещение равным 0.
Вам может показаться странным, что я повторил три варианта одной и той же тени. Причина, по которой я сделал это, в том, что я хотел сделать на самом деле темную виньетку, и одной тени тут будет не достаточно!
.vignette { background: url("/400/200/nature/5.jpg"); width: 400px; height: 200px; -webkit-box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000; -moz-box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000; box-shadow: inset 0 0 50px #000, inset 0 0 50px #000, inset 0 0 50px #000;}
Гранж-эффект для фотографии
Демо-пример: на Tinkerbin.
Для начала вам необходимо создать прозрачное шероховатое фоновое изображение. Я использовал эту текстуру для создания этого изображения. Хитрость тут в том, чтобы сделать текстуру точного того же цвета как фон страницы, на которую вы будете помещать её.
HTML
Просто создайте пустой div, для которого мы можем применить фоновые изображения.
<div></div>
CSS
Давайте сделаем чтобы наш эффект появлялся только при наведении курсора мыши. Для начала, мы применяем фоновое изображение, размеры контейнера и создаем небольшой эффект виньетки, как в прошлом примере. Теперь всё, что мы должны сделать, это добавить наше фоновое изображение при наведении курсора мыши.
body { background: #867d79;} .grunge { background: url("http://lorempixum.com/400/200/technics/4"); width: 400px; height: 200px; margin: 50px; -webkit-box-shadow: inset 0 0 20px black; -moz-box-shadow: inset 0 0 20px black; box-shadow: inset 0 0 20px black;} .grunge:hover { background: url("/imagetreatments-texture3.png"), url("/400/200/technics/4.jpg");}
Заключение
Надеюсь, вам понравились эти четырех эффекта. На создание каждого из них уйдет всего лишь минута, но все они добавляют определенный стиль для обычных изображений. Но, как и с любыми эффектами, используйте их избирательно и не переусердствуйте!
Перевод статьи с designshack.net
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Комментарии:
Добавить комментарий
www.webmasters.by
Использование стилевых таблиц CSS в WordPress
WordPress в большой степени зависит от стилей представления CSS. Благодаря использованию тем, вы можете бесконечно экспериментировать с настройками разметки. Темы WordPress позволяют легко и быстро изменить внешний вид веб-сайта, открывая широкое поле для создания своей собственной темы и разметки страниц.CSS расшифровывается как Cascading Style Sheets. Таблицы стилей хранят в себе информацию, связанную со стилевым представлением (разметка, цветовая гамма), отделяя его от HTML структуры. Такой подход позволяет получить четкий контроль над разметкой веб-сайта, приводит к ускорению работы веб-страниц и упрощает их обновление. В этой статье мы приведем краткое описание использования CSS в WordPress.
WordPress и CSS
Темы WordPress используют комбинацию шаблонов, тегов шаблонов и CSS файлов для генерации представления WordPress сайта.Шаблоны. Шаблоны — это стандартные блоки, из которых состоит сайт. Структура WordPress темы такова, что header, сайдбар, основной контент и footer содержатся в отдельных файлах. Они взаимодействуют для создания страницы. Вы всегда можете изменять и настраивать стандартные блоки. К примеру, в теме по умолчанию WordPress на страницах со списком записей (на главной странице, на страницах рубрик или архивов) всегда отображается сайдбар. Однако стоит перейти на страницу с отдельной записью, как сайдбар исчезнет. Вы всегда можете определить, какие части и элементы будут показаны на вашей странице, настроить их индивидуально, чтобы ваш сайт получил уникальное представление.Теги шаблонов. Теги шаблонов — это небольшие участки кода, представляющие собой инструкции и запросы к информации, содержащейся в базе данных WordPress. Некоторые из них могут быть легко изменены пользователем; теги шаблонов предлагают настройки даты, времени, списков и других элементов, отображаемых на вашем сайте.Стилевые таблицы. Во всех шаблонах, из которых состоит ваш сайт, присутствуют HTML элементы, связанные с тегами шаблонов и контентом. В таблице стилей любой темы существуют правила, позволяющие управлять дизайном и разметкой каждого HTML-элемента. Благодаря этим правилам, вы можете перемещать структурные части страницы, управлять представлением заголовков и т.д. Ваш сайт может быть закреплен по центру страницы с пустым пространством слева и справа, или простираться на весь экран. Ваш сайдбар может располагаться слева или справа, или появляться при прокрутке страницы. Все это зависит только от вас и ваших предпочтений. Инструкции, относящиеся к стилизации, должны находиться в файле style.css любой темы.
Классы, генерируемые WordPress
В WordPress 2.5 были представлены некоторые классы, позволяющие устанавливать выравнивание для изображений и блочных элементов (div, p, table и т.д.). Эти классы называются aligncenter, alignleft и alignright. В дополнение к ним существует также класс alignnone, применяемый к изображениям и отменяющий любое выравнивание для них, что позволяет стилизовать их другим образом.Те же самые классы используются и для выравнивания изображений, обладающих подписью(начиная с WordPress 2.6). Пример использования классов выравнивания и классов для изображений с подписью:
/* =WordPress Core -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display:block; margin: 5px auto 5px auto; } .alignright { float:right; margin: 5px 0 20px 20px; } .alignleft { float:left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float:right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float:left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto } .wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin:0; max-width: 98.5%; padding:0; width: auto; } .wp-caption p.wp-caption-text { font-size:11px; line-height:17px; margin:0; padding:0 4px 5px; }Источник: http://codex.wordpress.org/CSS
oddstyle.ru
Как сделать рамку для изображений с помощью css
data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">
Как мы уже разбирали в предыдущей статье, в обновленном редакторе WordPress 3.9 при редактировании изображения, отсутствует такой параметр, как рамка. Вернее, изображение с рамкой поставить можно, но оно отображается только через загрузку миниатюры. Но дело в том, что некоторые Темы Вордпресс не поддерживают такую функцию, как «вставить миниатюру», и следовательно, картинка с рамкой, в таком случае, недоступна.
Поэтому сегодня мы рассмотрим вариант, как сделать рамку для изображений с помощью css. Причем вариантов дизайна рамки может быть несколько. Для этого мы будем вносить изменения в файл style.css нашей темы. В редакторе кода ( файл style.css) свойства рамки отображаются, как border (легко запомнить, звучит аналогично со словом бордюр).
Основные свойства рамок
border-width — ширина рамки; указывается в пикселях
border-color — цвет рамки; например #000000 или black
border-style — стиль рамки; указывается один из стилей:
Стили рамок
Solid — рамка отображается сплошной линией
Dotted — рамка отображается точечной линией
Dashed — рамка отображается пунктирной линией
Double — рамка отображается двойной линией
Groove — линия имитирует вдавленный объем
Ridge - линия имитирует выпуклый объем
Inset — линия имитирует вдавленное изображение
Outset — линия имитирует выпуклое изображение
На рисунке ниже видны образцы стилей рамок.
data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">
В таблице ниже показаны два примера стилей, расширенный и сокращенный, использовать можно хоть тот хоть другой.
Примеры стилей
border-width: 4px;
border-style: double;
border-color: #FF0000;
Сокращенный вариант border:
border: 4px double #FF0000; }
Теперь нам нужно открыть в своей Теме файл style.css и отредактировать селектор изображений. Переходим Внешний вид-Редактор- Таблица стилей (style.css)
Находим a img {}, между скобками вставляем свой код, или редактируем уже имеющийся: удаляем значение none или 0 и проставляем выбранные нами характеристики. Новый код должен выглядеть таким образом:
-
a img {
border-width: 6px;
border-style: double;
border-color: #СССССС;
}
Или сокращенный вариант:
a img {
border: 6px double #СССССС;
}
—
На картинке синим цветом вставлен сокращенный вариант кода.
Все готово, можно посмотреть результат.
—
В общем, удобный способ для отображения рамки, но надо учитывать то, что теперь рамка будет отображаться для всех публикуемых изображений. Если в вашей Теме есть загружаемый логотип, то рамка будет распространяться и на него. Для того, чтобы рамочка отображалась только у конкретного изображения, нужно заменить селектор img на frame. В таком случае наш border будет выглядеть следующим образом:
frame {
border: 4px double #FF0000;
}
Теперь, когда мы будем вставлять изображение в текст, и нам нужно будет сделать для него рамку, то достаточно будет в дополнительных настройках в графу CSS-класс изображения вписать frame и сохранить. Вот и все.
Присоединяйся к нам на форуме
data-ad-client="ca-pub-9038233983914754"data-ad-slot="5706208564">
www.zhakanov.com
Использование CSS классов – удобный путеводитель
В сегодняшней статье мы рассмотрим CSS классы и их взаимосвязь с языком гипертекста. HTML — теги и CSS связаны напрямую. Эта взаимосвязь позволяет определить, как выглядит тег или как он ведет себя при использовании его имени в таблице стилей:
tag { /* Внешний вид и функциональные изменения. */ name:value; }Но зачастую требуется больше контроля, чем просто делать каждый экземпляр тега одинаковым. Если бы все ячейки HTML-таблицы были выполнены в одном стиле, это выглядело бы непрактично. К примеру, если вам нужно выделить определенные данные.
Поэтому CSS предоставляет нам два разных определения, которые мы можем использовать — CSS классы и идентификаторы.
CSS классы — когда их использовать
Когда у вас на странице есть повторяющиеся элементы, которые должны иметь одинаковое оформление, нужно использовать CSS классы. Для этого необходимо выполнить два шага:
Шаг 1 — добавить класс в HTML
Чтобы повлиять на внешний вид HTML-страницы, вы должны сначала разметить элементы с атрибутом class=»class-name». Вот пример:
<div> Контейнер 1 </div> <div> Контейнер 2 </div> <div> Контейнер 3 </div>В данном примере я хочу создать три контейнера одинакового размера. Возможно, я захочу запустить галерею изображений, или поместить в них изображения в качестве HTML — ссылки для перехода на другие страницы. При этом все контейнеры должны быть одинаковыми.
Давайте посмотрим, что нужно сделать в нашем CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#ddd; margin-right:10px; }Чтобы задать правило для определенного тега с CSS классом, а не просто определить tagname{ }, мы используем tagname.classname{ }. Точка между tagname и classname является тем, что определяет правило как CSS класс. Также обратите внимание, что там нет пробелов. Если поставить пробел в правиле, то оно не будет работать так, как вы планировали.
В этом примере использовалось свойство margin-right:10px. Эта строка гарантирует, что между тремя контейнерами сохраняется пространство в 10 пикселей. Свойство float со значение left обеспечивает, чтобы все контейнеры размещались слева.
Такое сочетание должно дать вам что-то вроде этого:
Если вы не укажете класс
Чтобы показать вам, что ваш CSS класс изображения box применяется только там, где вы хотите, поместите дополнительный элемент <div> после «Контейнер 3»:
<div> Контейнер 4 </div>Обновите страницу. Вы увидите, что ни одно из правил, установленных в div.box {} не применяется. Потому что вы не указали значение класса.
Вот почему этот вариант использования классов CSS более гибкий, чем простое tagname{ }. На странице может быть много элементов <div>, но стили будут применяться только к тем, в которых задано соответствующее значение атрибута class!
Использование более чем одного класса
В современном веб-дизайне для элемента иметь только один класс CSS — редкость. Давайте возьмем наши три квадрата и посмотрим, что произойдет, если вы захотите перекрасить каждый из них.
Чтобы указать, что вы хотите использовать в CSS несколько классов, нужно добавить следующий класс через пробел. Как здесь:
<div> Контейнер 1 </div> <div> Контейнер 2 </div> <div> Контейнер 3 </div>Расположение каскадом
Поскольку стили CSS используют каскадный порядок, вы размещаете свои классы по уровню важности. В данном случае мы хотим, чтобы класс class=»box» применялся перед class=»red». Иначе class=»red» будет применяться до class=»box». Надеюсь, это понятно!
Изменим наш код CSS:
div.box{ height:200px; width:200px; text-align:center; font-size:14px; color:#090; background-color:#dddddd; margin-right:10px; } div.red{ background-color:#ffcccc; } div.green{ background-color:#ccffcc; } div.blue{ background-color:#ccccff; }Поскольку у каждого из трех контейнеров есть CSS класс .box, к ним всем применяются свойства, прописанные в div.box. Но к каждому <div> применяется также дополнительный класс (red, green, или blue). Конечный результат:
Примечание: несмотря на то, что div.box определяет background-color:#cccccc; «цветовые» классы определяются после него. Например, в box red свойство background-color, указанном в div.red, перезаписывает аналогичное свойство в div.box. Это то, что подразумевается под каскадом: в CSS логике определяется сверху вниз. А при определении классов HTML — слева направо.
CSS классы при создании макета сайта
Подумайте, для каких элементов нужно использовать CSS классы при верстке макета страницы. Вот некоторые мысли для подсказки:
- Любые изображения, которые вам захочется сделать иконками или изображением товара, придется сделать в форме квадрата: например img.thumbnail{ width:200px;height:200px; };
- Стили ссылок для кнопок должны определяться отдельно от стилей обычных ссылок. Например, a.button {};
- Нужно применить другой цвет при наведении курсора на ссылки в вашей навигации. Например, a.nav:hover{ } a.nav: Hover {}.
Классы DR CSS; TL
Эффективное использование классов позволяет элементу страницы дать имя, которое понимает CSS. Используя эти «имена» можно применить один ряд правил для нескольких экземпляров элемента без повторного определения кода CSS.
И поскольку они располагаются каскадом, порядок в котором вы размещаете свои классы в HTML, действительно имеет значение, так что следите за этим.
Если у вас есть какие-либо вопросы, не стесняйтесь задать их в комментариях!
Перевод статьи “Using CSS Classes – A Handy Guide” был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Украшаем изображения на сайте. Произвольный отступ от рамки, или двойная рамка
В данной статье я наглядно покажу, как сделать изображения на сайте чуточку красивее, за счет добавления отступа от рамки. Информация для тех, кто хочет персонализировать публичный шаблон, или модифицировать нынешний.
Делается это при помощи стилей CSS, т.е. не нужно будет изменять фотографии и снова загружать на хостинг, или что-то рисовать в Photoshop. Все намного проще.
Для начала посмотрим, о чем идет речь. Вот наглядный пример:
Что мы здесь видим:
-
Само изображение (черный текст на сером фоне). Оригинальное изображение, без CSS вокруг, можно посмотреть по этой ссылке /800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg.
-
Желтая рамка вокруг изображения. Она имеет неравномерные отступы сверху, снизу и по краям (аля Polaroid).
-
Тоненькая рамка в 1px темно-серого цвета вокруг желтой рамки.
Если заинтересовались конкурсом, который анонсирован на картинке, сельву пле http://wpnew.ru (срок: с 30 января 2013 по 28 февраля 2013).
Как такое сделать
Итак, теперь вы поняли о чем будет вестись дальше речь. Скажу сразу: вы можете выбирать любые цвета для рамок. Я постарался подобрать такие, которые бы отличались и были заметны на любом мониторе. Для этого даже пришлось немного изменить стили сайта Wpnew.ru (как всегда помогает FireBug): сделать фон более серым, текст черным, убрать рекламу. Поэтому не удивляйтесь, кто читает Петра Александрова.
Делаем (условно) желтую рамку
Чтобы не вводить вас в заблуждение, внесу ясность: на самом деле желтый цвет это не "рамка", а лишь задний фон картинки. Чтобы такое сделать, необходимо добавить внутренний отступ изображения. Фактически - мы отодвинули картинку от края конструкции, в которой задний фон желтого цвета.
Вот так выглядит код картинки, когда я только ее загрузил в статью обычным способом на WordPress (встроенным загрузчиком, которым пользуетесь и вы):
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" />
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" /> |
А вот так будет выглядеть код картинки, если добавить задний фон желтого цвета с отступом:
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" />
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" /> |
И наглядный результат:
Самые внимательные из вас заметили, что добавилось, которое и задало необходимые нам параметры:
-
style=" " - конструкция, в которой мы описываем необходимые нам свойства CSS.
-
background:#FFE296; - задаем задний фон. Здесь #FFE296 обозначает желтый оттенок. Вы можете выбрать любой другой (воспользуйтесь пипеткой FastStone Capture или такой же пипеткой в Photoshop).
-
padding:15px 8px 25px 8px; - внутренний отступ, где отступы задаются так padding: сверху справа снизу слева;
Делаем наружную рамку серого цвета
В данном случае это будет действительно рамкой. Задается она так:
border:1px solid #CCCCCC;
border:1px solid #CCCCCC; |
Здесь у нас параметр border (рамка): 1px (толщина) solid (непрерывная) #cccccc (цвет).
Теперь осталось совместить рамку и задний фон, чтобы получить эффект, как показано на первой картинке к статье:
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" />
<img title="картинка" src="/800/600/https/mojwp.ru/wp-content/uploads/2013/02/konkurs2.jpg" alt="картинка" /> |
Как сделать это у себя на сайте
Есть два способа как такое сделать для фотографий/изображений на ваших сайтах:
- Вставлять определенный код в каждую фотографию/картинку в статье (режим HTML в админке сайта, во время написания статьи).
- Прописать этот код один раз в файле стилей шаблона (style.css или аналог) и забыть навсегда о рутине.
Как у первого, так и второго способа есть свои плюсы и минусы. Давайте по-порядку.
Вставляем код вручную в каждую картинку
Как уже говорилось выше, необходимо загрузить картинку на сайт как вы это обычно делаете и перейти на вкладку HTML в админке, чтобы вставить код в изображение, как я это показывал на примере.
Преимущество подобного способа: можно менять расцветки фона и рамки для каждого изображения, исходя из цветовой гаммы самого изображения. Так же плюсом данного способа будет относительная легкость выполнения, т.к. не нужно лезть в файл стилей шаблона и что-то там искать, а затем править.
Недостаток: это рутина, которая может не понравится большинству. Так же придется вручную пройтись по старым записям и добавить нужный код (чтобы весь сайт смотрелся гармонично).
Автоматическая подстановка стилей для изображения
При данном способе достаточно один раз прописать необходимые стили для изображения, чтобы они автоматически добавлялись в каждой статье. Для этого нам понадобится файл стилей шаблона (style.css, css.css или еще как-то будет называться).
При помощи бесплатного дополнения для браузеров FireBug (посмотрите видео с моего канала YouTube, где наглядно показаны принципы работы) находим класс элемента, отвечающего за отображения контента на странице, а затем прописываем для него указанные выше в статье стили.
К примеру: у меня на сайте за внешний вид тела статьи (фон, рамка, шрифт, цвет шрифта и прочее) отвечает класс post. По этой причине, в файле style.css я у себя сделаю с новой строки вот такую запись:
.post img {background:#fff;padding:15px 8px 25px 8px;}
.post img {background:#fff;padding:15px 8px 25px 8px;} |
В результате все картинки внутри статьи автоматически получат рамку серого цвета и задний белый фон с отступом. Обратите внимание, что я добавил img в код: это для того, чтобы указанные стили применялись только для изображений.
Вы так же внимательно пройдитесь по файлу стилей, прежде чем создавать новое правило. Быть может уже есть .post img (условно говоря) и вам останется лишь подправить в нем параметры.
Плюс данного способа: сделали один раз и забыли.
Минус: часть из вас сейчас сидит и моргает в недоумении глазами - "ничего не понял(а)".
Послесловие
Надеюсь, доступно объяснил принцип оформления изображений. Если что-то не поняли, то еще раз перечитайте статью и только затем пишите в комментарии с вопросами реализации.
Помните: "Кто захочет, тот поймет!". Удачи в блогерстве и конкурсах.
Привет. Меня зовут Виталик.
Я автор этого блога, а так же Магазина WordPress https://wp-r.ru/ и ридера блогов вебмастеров и SEO-специалистов WMSN.ru
Можешь оставить свой вопрос в комментариях к статье или предложить идею для новой статьи.
mojwp.ru
Адаптивные изображения с помощью CSS
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width(ширины) и значении auto для свойства height (высоты) изображений.
| img { width: 100%; height: auto; } |
img { width: 100%; height: auto; }
Базовые значения адаптивного изображения
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px;, в этом блоке нам необходимо вывести адаптивное изображение.Для этого элементу <img> внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
HTML:
| <div> <img src="image01.jpg" /> </div> |
<div> <img src="image01.jpg" /> </div>
CSS:
| div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ } |
div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }
Обратите внимание, что <img> элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Адаптивные изображения в колонках
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу <img> значение inline-block для свойства display, т.е. сделать его встроенным.Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонкиДля двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
HTML:
| <div> <img src="image01.jpg" /> <img src="image02.jpg" /> </div> |
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> </div>
CSS:
| img { width: 48%; display: inline-block; } |
img { width: 48%; display: inline-block; }
2. Три колонки изображений
С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32%.
HTML:
| <div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> </div> |
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> </div>
CSS:
| img { width: 32%; display: inline-block; } |
img { width: 32%; display: inline-block; }
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.Для реализации задуманного, применим медиа-запросы @media, указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width.
HTML:
| <div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> <img src="image04.jpg" /> </div> |
<div> <img src="image01.jpg" /> <img src="image02.jpg" /> <img src="image03.jpg" /> <img src="image04.jpg" /> </div>
CSS:
| /* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } } |
/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }
Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что...
Адаптивное изображение на всю ширину экрана
Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.
CSS:
| .container { width: 100%; } img { width: 100%; } |
.container { width: 100%; } img { width: 100%; }
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Источник: sixrevisionsНадеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
dbmast.ru
Основные классы CSS, часто используемые в WordPress
Пример заготовок, которые можно использовать в CSS при разработке собственной темы WordPress или модернизации уже используемой. Они помогут сэкономить время и придерживаться уже сложившихся стандартов.
Как и любая система с разнообразным и настраиваемым оформлением, WordPress претерпела долгий путь развития. Изменялась внутренняя структура, изменялись и классы CSS. Сейчас разработчики выработали определенный набор стандартных CSS-классов, которые рекомендовано использовать, если вы хотите изменить под себя не только внешний вид страниц блога, но и дизайн административной его части.
Привожу примеры наборов основных классов для разных частей блога, которые вы можете использовать при разработке своей темы или же модернизации уже существующей.
Основные классы для Body
.rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid-(id) {} .attachmentid-(id) {} .attachment-(mime-type) {} .author {} .author-(user_nicename) {} .category {} .category-(slug) {} .tag {} .tag-(slug) {} .page-parent {} .page-child parent-pageid-(id) {} .page-template page-template-(template file name) {} .search-results {} .search-no-results {} .logged-in {} .paged-(page number) {} .single-paged-(page number) {} .page-paged-(page number) {} .category-paged-(page number) {} .tag-paged-(page number) {} .date-paged-(page number) {} .author-paged-(page number) {} .search-paged-(page number) {}
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | .rtl {} .home {} .blog {} .archive {} .date {} .search {} .paged {} .attachment {} .error404 {} .single postid-(id) {} .attachmentid-(id) {} .attachment-(mime-type) {} .author {} .author-(user_nicename) {} .category {} .category-(slug) {} .tag {} .tag-(slug) {} .page-parent {} .page-child parent-pageid-(id) {} .page-template page-template-(template file name) {} .search-results {} .search-no-results {} .logged-in {} .paged-(page number) {} .single-paged-(page number) {} .page-paged-(page number) {} .category-paged-(page number) {} .tag-paged-(page number) {} .date-paged-(page number) {} .author-paged-(page number) {} .search-paged-(page number) {} |
Основные классы для записей типа Post
.post-id {} .post {} .page {} .attachment {} .sticky {} .hentry {} .category-misc {} .category-example {} .tag-news {} .tag-wordpress {} .tag-markup {}
.post-id {} .post {} .page {} .attachment {} .sticky {} .hentry {} .category-misc {} .category-example {} .tag-news {} .tag-wordpress {} .tag-markup {} |
В WordPress 3.1+ появились форматы записи типа Post — можно выбирать между image, gallery, video, chat, quote и другими. За присвоение класса каждому из этих форматов отвечает функция post_class. Например:
Поэтому не лишним окажется и добавление классов для форматов записи типа Post:
.format-image {} .format-gallery {} .format-chat {} .format-link {} .format-quote {} .format-status {} .format-video {}
.format-image {} .format-gallery {} .format-chat {} .format-link {} .format-quote {} .format-status {} .format-video {} |
Основные классы для навигационного меню
#header .main-menu{} /* контейнер */ #header .main-menu ul {} /* первый неупорядоченный список */ #header .main-menu ul ul {} /* неупорядоченный список в неупорядоченном списке */ #header .main-menu li {} /* пункт списка */ #header .main-menu li a {} /* ссылка в пункте списка */ #header .main-menu li ul {} /* вложенный список в пункте списка */ #header .main-menu li li {} /* выпадающий элемент навигации */ #header .main-menu li li a {} /* анкор выпадающего элемента */ .current_page_item{} /* Класс для текущей страницы */ .current-cat{} /* Класс для текущей рубрики */ .current-menu-item{} /* Класс для любого другого текущего пункта меню */ .menu-item-type-taxonomy{} /* Класс для таксономии */ .menu-item-type-post_type{} /* Класс для страницы */ .menu-item-type-custom{} /* Класс для любого пользовательского элемента, который был добавлен */ .menu-item-home{} /* Класс для элемента, ведущего на главную страницу блога */
#header .main-menu{} /* контейнер */ #header .main-menu ul {} /* первый неупорядоченный список */ #header .main-menu ul ul {} /* неупорядоченный список в неупорядоченном списке */ #header .main-menu li {} /* пункт списка */ #header .main-menu li a {} /* ссылка в пункте списка */ #header .main-menu li ul {} /* вложенный список в пункте списка */ #header .main-menu li li {} /* выпадающий элемент навигации */ #header .main-menu li li a {} /* анкор выпадающего элемента */
.current_page_item{} /* Класс для текущей страницы */ .current-cat{} /* Класс для текущей рубрики */ .current-menu-item{} /* Класс для любого другого текущего пункта меню */ .menu-item-type-taxonomy{} /* Класс для таксономии */ .menu-item-type-post_type{} /* Класс для страницы */ .menu-item-type-custom{} /* Класс для любого пользовательского элемента, который был добавлен */ .menu-item-home{} /* Класс для элемента, ведущего на главную страницу блога */ |
Основные классы визуального редактора
.entry-content img {} .alignleft, img.alignleft {} .alignright, img.alignright {} .aligncenter, img.aligncenter {} .alignnone, img.alignnone {} blockquote.left {} blockquote.right {} .gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {} .size-full {} .size-large {} .size-medium {} .size-thumbnail {} .wp-caption {} .wp-caption img {} .wp-caption p.wp-caption-text {} .wp-smiley {}
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .entry-content img {} .alignleft, img.alignleft {} .alignright, img.alignright {} .aligncenter, img.aligncenter {} .alignnone, img.alignnone {}
blockquote.left {} blockquote.right {}
.gallery dl {} .gallery dt {} .gallery dd {} .gallery dl a {} .gallery dl img {} .gallery-caption {}
.size-full {} .size-large {} .size-medium {} .size-thumbnail {}
.wp-caption {} .wp-caption img {} .wp-caption p.wp-caption-text {}
.wp-smiley {} |
Основные классы стандартных виджетов
.widget {} #searchform {} .widget_search {} .screen-reader-text {} .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {} .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {} .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} .textwidget {} .widget_text {} .textwidget p {}
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | .widget {}
#searchform {} .widget_search {} .screen-reader-text {}
.widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {}
.widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {}
.widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {}
.widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {}
.widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {}
.widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {}
.widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {}
.recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {}
.widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {}
.textwidget {} .widget_text {} .textwidget p {} |
Основные классы стандартных комментариев
#cancel-comment-reply {} #cancel-comment-reply a {} .commentlist .reply {} .commentlist .reply a {} .commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {} .commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {} .commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {} .commentlist {} .commentlist li {} .commentlist li p {} .commentlist li ul {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-{id} {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {} .commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {}
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | #cancel-comment-reply {} #cancel-comment-reply a {} .commentlist .reply {} .commentlist .reply a {}
.commentlist .alt {} .commentlist .odd {} .commentlist .even {} .commentlist .thread-alt {} .commentlist .thread-odd {} .commentlist .thread-even {} .commentlist li ul.children .alt {} .commentlist li ul.children .odd {} .commentlist li ul.children .even {}
.commentlist .comment-meta {} .commentlist .comment-meta a {} .commentlist .commentmetadata {} .commentlist .commentmetadata a {}
.commentlist .parent {} .commentlist .comment {} .commentlist .children {} .commentlist .pingback {} .commentlist .bypostauthor {} .commentlist .comment-author {} .commentlist .comment-author-admin {}
.commentlist {} .commentlist li {} .commentlist li p {} .commentlist li ul {} .commentlist li ul.children li {} .commentlist li ul.children li.alt {} .commentlist li ul.children li.byuser {} .commentlist li ul.children li.comment {} .commentlist li ul.children li.depth-{id} {} .commentlist li ul.children li.bypostauthor {} .commentlist li ul.children li.comment-author-admin {}
.commentlist .vcard {} .commentlist .vcard cite.fn {} .commentlist .vcard span.says {} .commentlist .vcard img.photo {} .commentlist .vcard img.avatar {} .commentlist .vcard cite.fn a.url {} |
Эти заготовки помогут не изобретать велосипед при добавлении оформления к основным элементам в теме WordPress, а использовать распространенные, используемые самими разработчиками системы, классы.
n-wp.ru
