Здравствуйте, уважаемые читатели XoZbloga! Спустя месяц отдыха, я приступаю к новому, так сказать сезону в работе. Постараюсь радовать Вас хорошими статьями и уроками 🙂 Как и в любом другом деле, в веб-разработке есть свои тонкости. И чтобы достичь желаемого результата необходимо знать их. В этой статье дам 10 советов, которые могут помочь Вам при разработке стилей CSS.
1) @media
1 2 3 | @media screen and (max-width: 960px) { ... } |
В спецификации CSS3 есть возможность использовать медиа-запросы. Благодаря этим запросам CSS можно оценивать некоторые технические характеристики устройств посетителя, и соответственно применять подходящие стили оформления. В приведенном выше примере могут быть описаны стили для ситуации когда окно браузера будет шириной 960 пикселей или меньше.
Более подробно о медиа-запросах: https://xozblog.ru/2012/09/responsive-menu/
2) background-size
1 2 3 4 | body { background: url(image.jpg) no-repeat; background-size: 100%; } |
Еще одним чрезвычайно полезным свойством CSS3 является background-size. Благодаря этому свойству можно масштабировать фоновое изображение как угодно.
3) @font-face
1 2 3 4 5 | @font-face { font-family: Blackout; src: url("blackout.ttf") format("truetype"); } h1 { font-family: Blackout; } |
Вы все еще пользуетесь стандартными шрифтами? Тогда мы идем к Вам! Это шутка конечно же, но действительно «грех» не воспользоваться свойством CSS @font-face и установить на своем сайте те шрифты, которые лучше всего подходят к разработанному дизайну и будут выглядет одинаково в разных браузерах и на разных устройствах. Все, что нужно — найти или создать шрифт и подцепить его к странице с помощью CSS @font-face. Также можно воспользоваться сторонними сервисами, такими как Google Web Fonts.
Более подробно о пользовательских шрифтах — https://xozblog.ru/2012/09/font-face/
4) margin: 0 auto
1 2 3 | #container { margin: 0 auto; } |
Удивительно, что до сих пор не разработано свойств для центрирования блок элемента (div). Поэтому приходится прибегать к ухищрениям, вот один из лучших способов как отцентрировать div по отношению к его родителю.
5) overflow: hidden
1 2 3 | .container { overflow: hidden; } |
Бывает необходимо чтобы размеры блочного элемента оставались нетронутыми, т.е. не увеличивались под действием содержимого: будь то текст или изображение. Решается это просто свойством overflow со значением hidden. Также у этого свойства есть и другие значения, например можно сделать полосу прокрутки (значение scroll).
6) .clearfix
1 2 3 4 5 6 7 8 | .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } |
Для тех ситуаций когда overflow: hidden не работает, можно воспользоваться методом Clearfix. Название класса может быть любым, не обязательно clearfix.
7) color: rgba()
1 2 3 | .btn { color: rgba(178,120,134,1); } |
Используя RGBa CSS можно придать прозрачность цвету, что невозможно при использовании шестнадцатеричное значение (#fafcdc). Для создания цвета надо указать значения составляющих цветов: красного, зеленого и синего, а также выставить альфа параметр. 1 — полностью не прозрачный, 0 — полностью прозрачный, соответственно 0.5 — прозрачный на половину.
8) input[type=»text»]
1 2 3 | input[type="text"] { width: 200px; } |
При разработке дизайна грамотно применяйте css селекторы, это позволит сократить и оптимизировать код. И в целом стремитесь минимизировать количество кода, ведь это залог хорошего программирования) Благодаря селектору приведенному выше, выбираются все поля с типом text и им задается ширина 200px.
Более подробно о CSS селекторах: https://xozblog.ru/2012/10/checkbox-radio-css3/
9) transform: rotate(30deg)
1 2 3 4 5 6 7 | .title { -moz-transform: rotate(15deg); /* Для Firefox */ -ms-transform: rotate(15deg); /* Для IE */ -webkit-transform: rotate(15deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate(15deg); /* Для Opera */ transform: rotate(15deg); } |
Не стоит также забывать об анимации CSS. Зачем перегружать веб-страницу лишними скриптами, когда их можно заменить css анимацией.
Более подробно о CSS анимации и свойстве transform: https://xozblog.ru/2012/06/transform/
10) a {outline: none;}
1 | a {outline: none;} |
Ничто не может испортить дизайн больше, чем пунктирные линии вокруг ссылки при нажатии. С помощью outline: none этого можно избежать.
Источник статьи/урока: https://xozblog.ru
По материалам: http://line25.com/articles/10-css-rules-every-web-designer-should-know