Одно из самых востребованных свойств в CSS в последнее время, является – добавление теней, причём, как к тексту, так и к изображению. В случае с текстом, тень придаёт ему «объёмности», в случае с изображением, особенно выделяет на общем фоне.

Что такое CSS и с чем его едят я узнал годах эдак в 2006-2007, как это не покажется забавным – играя в онлайн-игру, игра и по сей день существует, но вот возможность подключать свой шаблон (шкурку – скин) они уже убрали, тем не менее, когда-то такая возможность всё-таки была.

Для одного из сайтов, с которыми я работаю, мне понадобилось меню «аккордион», если Вы далеки от веб-терминологии, поясню: это когда нажимаешь на кнопку меню и появляется область (ранее скрытая) в которой идут дополнительные кнопки, которые как «матрёшка» так же раскроются, либо будут ссылками на какой-то материал.

В некоторых случаях, при дизайне сайта (особенно, когда используется свойство z-index), становится весьма актуален вопрос прозрачности фона. Первое время подобные «хитрости» использовались при подключении изображений с прозрачностью (png), однако прозрачность png-файлов в то время не поддерживалась браузером Internet Explorer. И соответственно выглядело это мягко скажем – «ущербно». Сегодня свойство прозрачности можно настроить в CSS, что значительно упрощает работу веб-дизайнера, поскольку наличие изображений может вообще не потребоваться.

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

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

Бывает, разработал сайт, всё в нём хорошо и дизайн всех устроил и в мобильной версии корректно отображается, и даже с браузерами беды нет, как вдруг, приходится вставить видео в контент. И вот тут то и начинаются беды у верстальщиков, поскольку видео-код предоставляется в «фиксированном» размере и здесь уже не угадаешь либо слишком маленькое на большом размере либо поплывший дизайн у мобильной версии.

Я вообще сторонник идеи, что «чем проще, тем лучше», что разного рода извращения со стилями только портят дизайн и отвлекают от содержимого, но что делать, когда клиент просит? Правильно, клиент всегда прав – а значит делаем. Вот примерно так со смирением я обычно делаю градиент на текст, раньше это делали в Photoshop, вставляя потом картинки на сайт (помните это убожество, да?) теперь можно настройки задавать в CSS.

Работая с одним из сайтов, возникла необходимость отцентрировать по вертикали текст в списке. Всё усложнялось ещё тем, что у каждого элемента был свой собственный list-style-image. Усложнялось, потому что всякие попытки установить свойство display приводило к тому, что изображение списка просто пропадало.

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