—»     —»   10 фрагментов CSS3-кода для разработчиков
  Раздел: CSS/Style Sheets   Комментариев: 6  

10 фрагментов CSS3-кода для разработчиков



Одним из наиболее важных для веб-разработчиков языков считается CSS3. Новичок вы или опытный разработчиков веб-сайтов, заранее подготовленные фрагменты CSS3-кода могут пригодиться вам. В то время как HTML предлагает нам структуру документов, эта структура порой может по-разному отображаться в разных браузерах. При оформлении ваших веб-сайтов, CSS3 может помочь вам создавать более интересные стили.

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

10 фрагментов CSS3-кода для разработчиков

Размытый текст

Данный фрагмент CSS-кода позволяет вам сделать текст немного прозрачным, а также добавить тень:

.blur{  
color: transparent;
text-shadow: 0 0 3px rgba( 0, 0, 0, 0.5);
}

Предварительная загрузка изображения

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

body:before {

content: url(images/hover3.gif);

display:none;

}

Текст с градиентом

Сегодня вы можете добиться текста с эффектом градиента при помощи webkit. Это самый опрятный способ добиться красивого текста, который при этом будет возможно редактировать, и нет необходимости использовать Photoshop.

h1 {
font-size: 20px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Прозрачность изображений

IE9, Firefox, Chrome, Opera и Safari используют свойство opacity для прозрачности. Свойство opacity принимает значения от 0.0 до 1.0. Самое низкое значение приводит к прозрачности элемента. IE8 и более ранние версии используют filter:alpha(opacity=x). X способен принимать значения от 0 до 100. Чем ниже значение, тем более прозрачным будет элемент.

img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Несколько фонов

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

#Multiple-Backgrounds {
width: 500px;
height: 250px;
background: url(decoration.png) left top no-repeat, url(ribbon.png) right bottom no-repeat, url(old_paper.jpg) left top no-repeat;
}

Тень текста

Теперь вам не обязательно использовать Photoshop, если вам хочется создать тень. Этот небольшой CSS3-сниппет поможет вам в этом:

text-shadow: 2px 2px 2px #000;

Псевдо-классы ссылок

Ссылки можно отображать различными методами в браузерах, которые поддерживают CSS:

a:link {color: blue;} /* unvisited link */
a:visited {color: purple;} /* visited link */
a:hover {color: red;} /* mouse over link */
a:active {color: yellow;} /* selected link */

Закругленные углы

Благодаря CSS3, вы можете добавлять закругленные углы.

#roundedcorners {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

Использование @font-face

Font-face – это отличный способ использовать небезопасные для веб-браузеров шрифты в ваших проектах. Пока метод с использованием @font-face работает, вам также следует обратить внимание на Fonts Squirel.

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Удаляем скроллинг в текстовых полях в IE

Internet Explorer зачастую надоедает тем, что в каждом текстовом поле принудительно отображается скроллинг, даже если он перекрывает контент. Вы можете избежать этого, воспользовавшись этим небольшим CSS-сниппетом.

textarea {

overflow:hidden;

}
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 6027   |   Оставлено комментариев: 6
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 27 ноября 2013 @ 18:16
Написал: Тим — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Кроме градиентного текста ничего нового.
Комментарий #2: 28 ноября 2013 @ 14:23
Написал: Typodin — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
А с каких пор псевдоклассы :link, :visited, :hover, :active стали CSS3? Переводил статью явно далекий от верстки человек, они вообще с первой версии поддерживаются.
Комментарий #3: 28 ноября 2013 @ 14:31
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Цитата: Typodin
А с каких пор псевдоклассы :link, :visited, :hover, :active стали CSS3? Переводил статью явно далекий от верстки человек, они вообще с первой версии поддерживаются.


Это писал статью-оригинал "явно далекий от верстки человек", т.к. перевод выполнен соответственно к оригиналу. Поэтому переводчик тут совсем не при делах.
Комментарий #4: 28 ноября 2013 @ 21:47
Написал: Typodin — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Цитата: Design FactoRy
Это писал статью-оригинал "явно далекий от верстки человек", т.к. перевод выполнен соответственно к оригиналу. Поэтому переводчик тут совсем не при делах.


Ну если ты взялся за перевод, то надо хоть как-то разбираться в предмете, а не копипастить чужие ошибки, тем более такие примитивные.
Комментарий #5: 5 декабря 2013 @ 19:04
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Цитата: Typodin
Ну если ты взялся за перевод, то надо хоть как-то разбираться в предмете, а не копипастить чужие ошибки, тем более такие примитивные.

Не вкурил в чем ошибка? То что данные классы поддерживаются в CSS3 и включены еще в CSS2, это не для кого не секрет, а молодежь, начинающая познавать тонкости верстки сейчас на старые версии не обращают внимания и для них и написано, что данные классы поддерживаются и в CSS3. То есть вы сверкнули гениальностью? Ну что ж, аплодирую стоя! wink


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #6: 13 декабря 2013 @ 12:59
Написал: Евгений — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
и зачем в реальной жизни нужно несколько фонов?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31