helpweb - статьи о програмировании и web-дизайе : CSS

Навигация

HTML [52]

CSS [77]

JQuery - фреймоврк [30]

CSS - Красивые выпадающие списки

Автор: hikaram
Просмотров: 26

<div class="articleContent">
Большенству веб-разработчиков, более или менее тесно общавшихся с разметкой известно, что выпадающие списки – <select> – как таковые невозможно отстилить. «Веб-разработчик – технарь, у него нет эстетического воображения» – подумает дизайнер и нарисует «красивые» селекты. Мало того, бизнес (заказчики или менеджеры) посмотрят и решат, что красиво – правильно. И вот стоишь ты один в поле и кручинишься, куда же тебя судьбинушка завела.
Сами селекты отстилить нельзя, зато можно сделать для них красивую обертку можно. Что нам для этого нужно:
<ol>
<li>Не самые глубокие познания в HTML</li>
<li>Advanced скилы в CSS</li>
<li>Немного JavaScript</li>
<li>Холодную голову</li>
<li>Крепкие нервы</li>
<li>Пол-литра пива</li>
</ol>
Есть, к примеру, дизайн страницы и в нем вот такое чудо, которое должно исполнять роль селекта:
<div style="text-align: center;"><img width="221" height="45" title="select_01" alt="" src="http://frontendblog.info/post-images/2010/08/select_01.png"></div>
Ну и предположим, что дизайна на саму выпадающую часть у нас нет – значит подойдет и стандартная. Дальше буду рассказывать про то как минимизировать труды с максимумом пользы.
Делаем красивую HTMLку, как нас просит дизайн, абсолютно-позицыонируем над ней селект и прячим селект. Ну хорошо, скажите Вы, и как же заставить всю эту громадину работать, если всем известно, что JavaScript‘ом селект не откроешь? Дочитай до конца и не лезь вперед батьки, отвечу я. Вот Вам селект, попробуйте в него покликать, в любое место, в любом браузере:
<div style="text-align: center;">
<select>
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>22222222</option>
<option>22222222</option>
</select>
</div>
Удивительно, не правда ли? Он открывается куда бы в него ни кликнули. Вот на этом и построим весь принцып работы нашего красивого селекта. При этом все-таки можно задать ему размеры:
<pre><code class="html"><select style="width: 200px; height: 30px;"> <option>------------</option> <option>11111111</option> <option>22222222</option> <option>22222222</option> <option>22222222</option> </select> </code></pre>
<div style="text-align: center;">
<select style="width: 200px; height: 30px;">
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>22222222</option>
<option>22222222</option>
</select>
</div>
Как всегда, первым делом HTML:
<pre><code class="html"><span class="select"> <span class="left"> <span class="button"> <span class="center"> <select> <option>------------</option> <option>11111111</option> <option>22222222</option> <option>22222222</option> <option>22222222</option> </select> </code></pre>
Здесь будет использоваться тот же принцип, что и в посте про <a class="mylink" href="/styles/prettiness/pretty-buttons/">кнопки</a>, и, самое главное, очень похожий спрайт:
<div style="text-align: center;"><img width="100" height="110" title="select_bg" alt="" src="http://frontendblog.info/post-images/2010/08/select_bg.png"></div>
Вы, наверное, заметили, что вместо излюбленных всеми дивов, я использовал здесь спаны. А сделал я это из простой лени. Как известно, великий и неповторимый IE7 не очень любит, когда нативно-блочные элементы принуждают быть инлайн-блочными, и игнорирует такое обращение с ними. Так что выхода остается 2 – либо некрасивый хак, либо красивый спан <img class="wp-smiley" alt=":)" src="http://frontendblog.info/wp-includes/images/smilies/icon_smile.gif"> Я за второе.
Давайте пока забьем на сам селект и по-быстрому набросаем его обложку. Стили там тоже не сложные, как и у кнопок:
<pre><code class="css">.select { display: inline-block; position: relative; /* основа для позиционирования селекта */ } .select span { background-image: url(/* здесь путь к спрайту */); display: block; /* применение бокс-модели */ cursor: pointer; height: 30px; /* высота части спрайта */ line-height: 30px; /* выравниваем текст по высоте */ } .select .left { background-position: 0px 0px; /* позиционируем спрайт */ padding-left: 10px; /* ширина соотв. части в спрайте */ background-repeat: no-repeat; } .select .button { background-position: right -80px; /* позиционируем спрайт */ padding-right: 30px; /* ширина кнопки в спрайте */ background-repeat: no-repeat; } .select .center{ background-position: left -40px; /* позиционируем спрайт */ background-repeat: repeat-x; width: 150px; } </code></pre>
 На этом этапе мы имеем вполне красивую и соответствующую дизайну непонятную штуку и селект:
<div style="text-align: center;"><img width="250" height="78" title="select_02" alt="" src="http://frontendblog.info/post-images/2010/08/select_02.png"></div>
Теперь надо расположить селект поверх нашего непойми чего и выровнять его размеры:
<pre><code class="css">.select select { position: absolute; width: 190px; height: 30px; left: 0px; top: 0px; }</code></pre>
А чтобы было проще с размерами определяться, сделаем селект маленько прозрачным:
<pre><code class="css">.select select { position: absolute; width: 190px; height: 30px; left: 0px; top: 0px; opacity: .2; filter: alpha(opacity=20); }</code></pre>
Получившийся результат посмотрим, пощелкаем покликаем……:
<style type="text/css">
.select select {
position: absolute;
width: 190px;
height: 30px;
left: 0px;
top: 0px;
opacity: .4;
filter: alpha(opacity=40);
}
.select select.transparent {
opacity: 0;
filter: alpha(opacity=0);
}
.select {
display: inline-block;
position: relative; /* основа для
позиционирования селекта */
}
.select span {
background-image: url(/post-images/2010/08/select_bg.png);
display: block; /* применение бокс-модели */
cursor: pointer;
height: 30px; /* высота части спрайта */
line-height: 30px; /* выравниваем текст по высоте */
text-align: left;
}
.select .left {
background-position: 0px 0px; /* позиционируем спрайт */
padding-left: 10px; /* ширина соотв. части в спрайте */
background-repeat: no-repeat;
}
.select .button {
background-position: right -80px; /* позиционируем спрайт */
padding-right: 30px; /* ширина кнопки в спрайте */
background-repeat: no-repeat;
}
.select .center{
background-position: left -40px; /* позиционируем спрайт */
background-repeat: repeat-x;
width: 150px;
}
</style>
<div style="text-align: center;">
 
<select>
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>33333333</option>
<option>44444444</option>
</select>

</div>
Заметили? Именно!!! Вот так же я однажды сидел и выравнивал размеры селекта и обратил внимание, что даже если сам селект полупрозрачный его выпадающая част будет видна, а сам он остается кликабельным и активным в форме. И остается только сделать селект полностью прозрачным и прикрутить обработчик небольшой на клик и изменение у селекта:
<pre><code class="css"><select onclick="$(this).parent().find('.center') .html(this.options[this.selectedIndex].text)" onchange="$(this).parent().find('.center') .html(this.options[this.selectedIndex].text)" ></code></pre>
<div style="text-align: center;">
———— 
<select onclick="$(this).parent().find('.center').html(this.options[this.selectedIndex].text)" onchange="$(this).parent().find('.center').html(this.options[this.selectedIndex].text)" class="transparent">
<option>————</option>
<option>11111111</option>
<option>22222222</option>
<option>333333333</option>
<option>44444444</option>
</select>

</div>
Собственно, все.
</div>

Подробнее

[29 декабря 2011] Комментариев: 0

CSS - Как написать CSS только для Safari

Автор: hikaram
Просмотров: 105

Несмотря на экзотичность такого фильтра, он мне понадобился уже на двух проектах. Это, ясное дело, из-за того что у меня мак, и мне не все равно. Короткий грязный(невалидный и не future proof) но работающий здесь и сейчас хак для Safari 2-3.
Зачем это надо?

Ситуаций, в которых я он мне понадобился оказалось пока 2.

Подробнее

[4 октября 2011] Комментариев: 0

CSS - Делаем лайтбокс без использования JavaScript

Автор: hikaram
Просмотров: 99

Шаг 1. Пишем разметку.
01 <div id="container">
02 <div id="header">
03 <h1>Лайтбокс на XHTML & CSS (без использования JavaScript)</h1>
04 
05 
06 Разработчик: <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a> /
07 Исправления для OPERA: <a href="http://www.3d4x.ch/" target="_blank">Tobias Wiersch</a> /
08 Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a>
09 
10 
11 </div>
12 <div id="content">
13 <h2>Нажмите на ссылки в тексте ниже, чтобы увидеть лайтбокс в действии</h2>
14 Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit.
15 Donec massa lorem, elementum et mollis non, viverra a est.Aliquam eget tellus risus.
16 Proin <a href="#">sollicitudin</a>elementum sem id pulvinar.
17 Duis nec est at mi condimentum consequat sed vitae metus. Lorem ipsum dolor sit amet, consectetur
18 adipiscing elit.
19 </div>
20 <div id="footer">
21 Copyright <a href="http://twitter.com/jjenzz" target="_blank">Jenna Smith</a>
22 Перевод на русский язык: команда <a href="http://www.ruseller.com/" target="_blank">сайта RUSELLER.COM</a>
23 </div>
24 </div>

Подробнее

[13 мая 2011] Комментариев: 0

CSS - Ещё раз про закругленные углы

Автор: hikaram
Просмотров: 122

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

<div class="wrap">
<div class="tr"></div><div class="tl"></div>
<div class="content">

</div>
<div class="br"></div><div class="bl"></div>
</div>

Подробнее

[16 марта 2011] Комментариев: 0

CSS - Плавающие блоки с разной высотой, с выравниванием в ряду по самому высокому

Автор: hikaram
Просмотров: 233

Иногда когда делаем блоки с float:left, приходится сталкиваться с блоками разной высоты, и они при переходе на новую строчку, начинают строится после самого высокого, что ужастно… И приходится или ставить после определённого количества br clear=’all’ или указывать фиксированую высоту, что не всегда приемлемо.

Этот вопрос можно решить всего-лишь сэмулировав display:inline-block для старых ИЕ и для старых фоксов, ниже 3

Подробнее

[30 ноября 2010] Комментариев: 0

CSS - vertical-align для DIVа с изменяемой высотой

Автор: hikaram
Просмотров: 128

Есть Хтмл, в нём Див.dynamic с контентом изменяемого размера и контейнер.middle плавающий, что должне быть по центру.
<div id="container">
<div id="dynamic">
любая текстовая рыба
</div>
<div id="middle">
<div id="ie_helper">
ТекстЪ по центру. 
</div>
</div>
</div>
Есть простенький цсс, который просто делает с наших дивов ячейку, и потому работает вертикал-алигн.

Подробнее

[17 ноября 2010] Комментариев: 0

CSS - CSS3: button

Автор: hikaram
Просмотров: 158

Проскала статья на хабре, а красивой кнопке, сделанной на css3. Нам нужен html: <a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>
Подробнее	[17 ноября 2010] Комментариев: 0

CSS, Раскрутка - СЕО-колонка

Автор: hikaram
Просмотров: 150

SEO-колонка спросите вы? Ничего тут страшного нет. Это просто колонка которая идёт за контентом. По сути контент поисковик видит сразу, и сайт более СЕО-дружен ;)

<html>
<head>
<title>Column page</title>
</head>
<body>
<div class="wrapper">
<div class="content">
text
</div>
<div class="sidebar">
text
</div>
</div>
</body>
</html>

Подробнее

[17 ноября 2010] Комментариев: 0

HTML, CSS - Создаем шаблон сайта с помощью CSS3 и HTML5

Автор: hikaram
Просмотров: 260

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

Одна из таких новейших технологий - это HTML5 - новая версия базового языка для создания сайтов.

Сегодня мы создадим HTML5 шаблон для сайта используя новые возможности CSS3 и jQuery. Также при создании мы используем плагин scrollTo.

Подробнее

[14 октября 2010] Комментариев: 0

CSS - Position: fixed; - фиксируем блок на странице

Автор: hikaram
Просмотров: 372

От начала и до конца. В этой заметке я объясню как кроссбраузерно сделать position:fixed с помощью CSS и избавится от подергивания блока при прокрутке в ИЕ.

Сразу скажу - за все время, проведенное в сети, я заметил, что блоки с фиксированным положением на странице (не зависящим от скролла), довольно мало используются. Нет, разумное использование таких элементов на сайте не осуждается общественностью. Скорее дело в другом - фиксированные блоки неизбежно привлекают внимание посетителя при прокрутке страницы. Он отвлекается от своей цели - и, как правило, немного раздражается.

Ситуация усугубляется тем, что блоки с фиксированным позиционированием часто используются для рекламы - по определению яркой и бросающейся в глаза. Ну и если посмотреть in general, если я двигаю скролл - по законам природы, всё на странице должно скроллиться.

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

Подробнее

[28 июля 2010] Комментариев: 0

[1] 2 3 4 5 6 7 8 далее »

Поиск по сайту