CSS – Блог Stafox'a

Less кэширует импортируемые файлы

Stafox — Sat, 11 Apr 2015 17:08:39 +0000

Столкнулся с проблемой кэширования при использовании less. Речь идет об использовании less.js для компиляции на лету.

Конкретно проблема состоит в том, что файлы, которые подключаются через @import кэшируются особенным образом – очистка кэша (или отключение кэширования в браузере) никак не решает проблему.
Как оказалось, хранится все это в window.localStorage. В LESS уже вприцнипе все предусмотрели, и для того чтобы отключить кэширование достаточно установить окружение как development, а делается это следующим образом:

[js] var less=less||{}; less.env=’development’;
[/js]

Хочу отметить, что этот код должен располагаться до подключения less.js

Сообщение Less кэширует импортируемые файлы появились сначала на Блог Stafox'a.

Рейтинг на CSS

Stafox — Fri, 10 Aug 2012 19:46:36 +0000

Не так давно пришлось заняться реализацией возможности оставлять отзывы с выставлением оценки. Своего рода рейтинг. Расскажу как это можно сделать легко, красиво, функционально.

Что нам потребуется? Две картинки (пустая звезда и заполненная) и немного CSS. А теперь, расскажу немного о функциональности. Данный пример позволяет реализовать не только 5 бальную систему оценок, но и 7, 10, 20, и даже 100. Данный пример удобно использовать с каким нибудь динамическим языком программирования, например PHP. Для начала нам понадобится html-страничка со следующим кодом.

[html]

RateThis

4.25 / 5

[/html]

Структура есть. Перейдем к стилям.

[css] .testimonial-rating {
width:200px;
height:24px;
line-height: 24px;
}
.testimonial-rating-stars {
background:url("img/star_empty.png") repeat-x;
width:120px; /* Ширина звезды * желаемое число звезд */
height:24px; /* Высота звезды */
float:left;
}
.testimonial-realrating {
background:url("img/star.png") repeat-x;
height:24px; /* Высота звезды */
}
.testimonial-numerical-rating {
width:70px;
padding-left:10px;
float:right;
font-size: 14px;
text-align: left;
}
[/css]

О том как подключить css-стили Вы можете прочитать во второй лекции “CSS с нуля”. Вот в принципе и все. Любезно предоставляю Вам исходники и демо.

Сообщение Рейтинг на CSS появились сначала на Блог Stafox'a.

CSS с нуля. Лекция 2

Stafox — Fri, 27 Jul 2012 13:18:33 +0000

Во второй лекции мы немного глубже копнем CSS и познакомимся. Рассмотрим способы добавления стилей на страницу.

Способы добавления стилей

Исходя из подзаголовка, Вы наверняка догадались, что количество таких способов больше чем один Рассмотрим первый, он же, самый популярный.
Добавление стилей на сайт производится указанием местоположения файла стилей c помощью тега .

[html][/html]

Вы заметили, что в примере был указан относительный путь? Также можно подключить стили со стороннего сайта, указав прямой путь к файлу стилей:

[html]
[/html]

И не забывайте, что тег должен располагаться между и
Стили, подключенные таким способом, получили название связанные.

Второй способ, не очень популярен, и я его использую крайне редко.

[html] …

…
[/html]

Стили объявляются в html-документе, главное не забыть “обвернуть” их в тег

Simple Text

[/html]

Все проще, чем могло показаться, правда? А все потому, что CSS интегрирован во все современные браузеры. CSS очень простой и наглядный, что позволяет быстро привыкнуть к нему и влюбиться

Я думаю это неплохое легкое начало, которое не в коем случае не отпугнет Вас от изучения CSS. На этом все, подписываемся на RSS ленту, чтобы не пропустить следующую лекцию, надоедаем в комментариях, чтобы ускорить процесс

Сообщение CSS с нуля. Лекция 1 появились сначала на Блог Stafox'a.

Необыкновенное выделение ссылок с помощью CSS3

Stafox — Sun, 30 Oct 2011 10:27:38 +0000

Сегодня я хочу рассказать о необычном способе выделения ссылок, который я уже использую в своём новом шаблоне.

Такое выделение смотрится довольно красиво и подвижно, и реализовывается при помощи CSS.

Разъясню подробнее, какие свойства и псевдоселекторы используются для этого. Для начала нам нужно определить стили для ссылок на странице:

[css] a {
display:inline-block;
color:#555;
-webkit-transition-duration: 0.25s;
-moz-transition-duration: 0.25s;
-o-transition-duration: 0.25s;
-ms-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-transform: scale(1) rotate(0);
-moz-transform: scale(1) rotate(0);
-o-transform: scale(1) rotate(0);
-ms-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
[/css]

Вы заметили похожие свойства? Да, они похожи, но приставка перед ними (-o-, -moz-, -webkit-, -ms-) указывает на браузер, для которого будет использовано это свойство. Дело в том, что некоторые браузеры не поддерживают новые свойства css3 (я говорю о старых браузерах), поэтому с помощью этих приставок работу этих свойств можно проверить в экспериментальном режиме. Так мы сможем добиться максимальной кроссбразерности.

transition-duration: 0.25s; Эта строка задаёт задёржку преобразования равной 0.25 секунды.
transition-property: transform; Задаём тип преобразования – трансформация.
transform: scale(1) rotate(0); Указываем параметры трансформации. Scale(1) – относительное растяжение, 1 указывает на то, что растяжения не будет. Rotate(0) – поворот. 0 указывает на то, что поворот осуществляется на 0 градусов (т.е. не осуществляется).
Теперь рассмотрим стили при наведении на ссылку, за которые отвечает псевдоселектор :hover
[css] a:hover {
color:#333;
text-shadow:0 1px 0 #0f9fff;
display:inline-block;
background:#006fdd;
padding:2px 5px 2px 5px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
-ms-transform:scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
}
[/css]

Свойство border-radius также воспринимается лишь новыми браузерами, поэтому и к нему припишем приставок. Оно отвечает за радиус скругления.
Свойство background задает цвет фона.
Свойство display указывает тип отображения.
Свойство padding отвечает за отступы (сверху, справа, снизу, слева).
Теперь свойство transform принимает значения: scale(1.05) – растянуться в 1.05 раза и rotate(-1deg) – повернуться на -1 градус.

А теперь то, что придаст необыкновенности, псевдоселектор :nth-child(2n), который используется для добавления стиля к элементам на основе нумерации в дереве элементов.

[css] a:nth-child(2n):hover {
background:#ffb111;
text-shadow:0 1px 0 #FFDF7D;
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
-ms-transform:scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}
[/css]

Значения

odd – Все нечетные номера элементов.
even – Все четные номера элементов.
число – Порядковый номер дочернего элемента относительно своего родителя. Нумерация начинается с 1, это будет первый элемент в списке.
выражение – Задается в виде an+b, где a и b целые числа, а n — счетчик, который автоматически принимает значение 0, 1, 2…

Если a равно нулю, то оно не пишется и запись сокращается до b. Если b равно нулю, то оно также не указывается и выражение записывается в форме an. a и b могут быть отрицательными числами, в этом случае знак плюс меняется на минус, например: 5n-1.

За счет использования отрицательных значений a и b некоторые результаты могут также получиться отрицательными или равными нулю. Однако на элементы оказывают влияние только положительные значения из-за того, что нумерация элементов начинается с 1.

htmlbook.ru

Вот впринципе и всё. Как вы видите, в нашем случае при наведении на четный элемент, будет меняться цвет фона ссылки, а также поворот будет осуществляться в другую сторону.

Посмотреть пример вы можете здесь.

Сообщение Необыкновенное выделение ссылок с помощью CSS3 появились сначала на Блог Stafox'a.

Тени в CSS

Stafox — Tue, 19 Apr 2011 19:50:08 +0000

В прошлой статье я упоминал, о том, что эффекта letterpress можно добиться с помощью CSS. Так вот, я подумал, и решил, что следует остановиться на этом моменте и рассказать о нём побольше. Свойство text-shadow появилось ещё в далёком 1998 году в спецификациях к CSS2, однако совсем недавно данное свойство получило полноценную поддрежку. Как известно, в каждом правиле есть исключения, так вот IE является исключением (даже IE9, который вышел в 2011 году, до сих пор не воспринимает text-shadow). Так вот, в связи с тем, что большинство браузеров на те времена игнорировали text-shadow, данное свойство было исключено из CSS2.1 и вернулось к нам, только в CSS3.

[css] text-shadow: #000 1px 0px 3px;
[/css]

где #000 – цвет тени, 1px – смещение тени по оси X, 0px – смещение тени по оси Y, 3px – радиус размытия тени.

Ниже приведу код с описанием теней трёх видов:

[css]

Тени в CSS

Вид тени №1

Вид тени №2

Вид тени №3

[/css]

Демо

Если внимательно присмотреться к тени №2 то можно заметить, что в ней присутствует 2 тени.

Оказывается что теней может быть несколько. Например, Opera поддерживает максимум 6–9 теней. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на работе браузера. Opera версии 9.5+ использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. Множество теней поддреживается начиная с версии 4.0

Однако до сих пор IE используют 12-15% пользователей. О них тоже нужно помнить, поэтому, чтобы придать тень тексту для IE используют фильтр:

[css] filter: glow(color=#0000ff,strength=3);
[/css]

Однако хочу сразу предупредить, что смотрится это ужасно.

Второй вид тени в CSS – это box-shadow. Это свойство доступно в CSS3. Сегодня оно поддерживается браузерами IE9, Opera 10.5+, Firefox 4.0, исключения Safari и Chrome.

[css] box-shadow: inset 1px 0 5px #000;
[/css]

inset – Необязательный параметр. Позволяет выводить тень внутри элемента.
1px – Обязательный параметр. Сдвиг по оси X. Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
0 – Обязательный параметр. Сдвиг по оси Y. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх.
5px – Необязательный параметр. Размытие. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
#000 – Необязательный параметр. Цвет. Цвет тени в любом доступном CSS формате, по умолчанию тень черная.

Также можно указать несколько теней, разделяя их запятой. И стоит помнить то, что свойство box-shadow увеличивает размеры элемента к которому оно применяется.

Для того, чтобы установить тень в Firefox до версии 4.0, нужно использовать свойство -moz-box-shadow, В Safari и Chrome – -webkit-box-shadow.
Для Internet Explorer до версии 9.0 можно использовать фильтр:

[css] filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
[/css]

где offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.

[css] filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);
[/css]

где direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Вот как выглядит div, после наложения box-shadow:

[css] "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Тень box-shadow

Тень есть и будет!

[/css]

Демо
Применить эффект тени можно даже к ссылке матрасы Intex.

Сообщение Тени в CSS появились сначала на Блог Stafox'a.