Уважаемые подписчики, если вы еще живы и готовы получать интересные (я надеюсь) статьи и информацию от меня, то ждите новый gtalk.kz в новом 2014 году.
Css препроцессоры часть 1
Итак, давайте будем расти как верстальщики. Для качественной верстки и удобства (особенно для больших проектов) было придуманы css препроцессоры. Далее поговорим немного о них.
Давайте начнем с того, что обычный css нас многим не устраивает. А если вы считает, что все круто, то тогда не читайте дальше, а идите спать. Поэтому некоторые вещи мы делаем на javascript либо что-нибудь эдакое придумываем.
Возвращение ножа и паровоза. Работа с графикой для веба
Именно так называется мастер-класс от Вадима Макеева. Все нижеописанное явилось причиной размещения данного анонса на моем блоге. Собственно рекомендую, всем тем, кто задавал вопросы по верстке и работе с фотошопом.
Сниппеты для Stylus
Здесь вы сможете найти полезные сниппеты для css препроцессора stylus. (подробнее о самом препроцессоре здесь) Большинство из них ориентированы на кроссбраузерность. Все браузеры, которые поддерживают те или иные свойства, можно посмотреть на caniuse
Все сниппеты можно добавить в отдельно созданный файл, например, config.styl и через @import 'config' добавить в основной файл stylus.
Содержание по сниппетам:
- кроссбраузерный border-radius
- box-shadow (тень)
- transition
- кроссбраузерный opacity (прозрачность)
Stylus border-radius
border-radius() -moz-border-radius arguments /* Firefox */ -webkit-border-radius arguments /* Chrome, Safari */ -khtml-border-radius arguments /* KHTML */ border-radius arguments /* Css 3*/ behavior unquote('url(pie/PIE.htc)') /* для поддержки плохих IE */
Для того чтобы border-radius поддерживался в IE можно использовать PIE.htc (подробности здесь), либо другую альтернативу.
Stylus box-shadow
box-shadow() -moz-border-shadow arguments /* Firefox */ -webkit-border-shadow arguments /* Chrome, Safari */ border-shadow arguments /* Css 3*/
Stylus transition
transition() -webkit-transition arguments /* Chrome, Safari */ -moz-transition arguments /* Firefox */ -o-transition arguments /* Opera */ -ms-transition arguments /* IE новые */ transition arguments /* Css 3*/
Stylus opacity
opacity(n) -ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+n*100+')"') /* IE */ filter unquote('alpha(opacity='+n*100+')') -moz-opacity n /* Firefox */ -khtml-opacity n /* KHTML */ opacity n /* Css 3*/
Центрирование сайта
Для тех кто не знает как отцентрировать сайт, напоминаю:
1. К примеру, разметка следующая:
<body> <div id="page-wrap"> <!-- здесь html вашего сайта --> </div> </body>
2. Добавим css:
#wrap { width: 960px; /* ширина вашего сайта */ margin: 0 auto; /* выравнивание по центру отступы по бокам auto, сверху и снизу по вкусу: например, margin: 10px auto 30px; */ }
Анимированная загрузка на css
Данная анимация сделана с использованием css 3, поэтому если вы хотите более обширную поддержку браузерами, используйте gif картинки.
Html разметка очень простая:
<div class="class"> <span></span> <span></span> <span></span> </div>
И css сниппет:
.class { text-align: center; } .class span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: black; border-radius: 50px; -webkit-animation: loader 0.9s infinite alternate; -moz-animation: loader 0.9s infinite alternate; } .class span:nth-of-type(2) { -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; } .class span:nth-of-type(3) { -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; } @-webkit-keyframes class { 0% { width: 10px; height: 10px; opacity: 0.9; -webkit-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -webkit-transform: translateY(-21px); } } @-moz-keyframes class { 0% { width: 10px; height: 10px; opacity: 0.9; -moz-transform: translateY(0); } 100% { width: 24px; height: 24px; opacity: 0.1; -moz-transform: translateY(-21px); } }
Результат можно посмотреть:
Размытый текст
Если вам понадобилось сделать размытый текст с помощью css, используйте следующий сниппет:
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
Внимание! Поддерживается не всеми браузерами.
Пример:
Размытый текст
Лучше Helvetica
Пожалуй, лучший способ использования Helvetica или как лучше использовать шрифт Helvetica
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; }
Css сниппеты для веб-разработчика
Приветствую всех пользователей/посетителей блога gtalk.kz. Сегодня я хочу поделиться с вами полезным разделом, открытый мой – css snippets (css сниппеты).
В данном разделе я буду собирать интересные и полезные коды css и html.
Что такое сниппеты и зачем они нужны вы можете прочитать на той же странице. Добавляйте ее в закладки, подписывайтесь на обновления. Будем добавлять самое полезное и интересное. И не только просто код, а также описание и руководства к ним или туториалы (сейчас так модно руководства называть ).
Кстати, подобную статью я уже писал. Можете почитать ее – 20 невероятно полезных css сниппетов (только сейчас будет раздел)
До скорых встреч. Надеюсь теперь появляться чаще.
з.ы. многие хорошие вещи будем брать тут (англ.)
Кроссбраузерный @font-face
Для загрузки на сайт нестандартных шрифтов, используйте следующий css сниппет:
@font-face { font-family: 'MyFont'; src: url('webfont.eot'); /* IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Современные браузеры */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ }
Для непосредственного использования:
.you_class { font-family: 'MyFont', sans-serif; }