css » СОЗДАНИЕ САЙТОВ | Разработка сайтов

Интересные штуки с CSS #

Что бы талица была зеброй

table tr {
   background: white;
}

table tr:nth-child(odd) {
   background: #f4f4f4;
}

А теперь что бы еще и подсвечивался рядок при наведении

.table tbody tr:hover td{
background-color: #f5f5f5;
}

Прячим всплывающее окно при наведении на урл

a.js-only {
-webkit-touch-callout: none;
}

Задавая это свойство элементу вы можете определять то, как будет выглядеть элемент SPAN. Например, как radio button:

span.lookLikeRadio {
-webkit-appearance: radio;
}

Оказывается, маску при вводе пароля можно изменять. Например, вместо кружков можно отображать квадраты.

input[type="password"] {
-webkit-text-security: square;
}

На этом все. Не забывайте подписываться.

Блог » CSS / Теги: css, webkit, hook / 08.04.12 / Комментировать [0]

Каскады CSS от Gala #

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

layout.veselov.sumy.ua

CSS, XHTML, Заметки, Обзор / Теги: каскады, css, таблицы / 28.11.10 / Комментировать [0]

Напоминалка о селекторах в CSS #

*
Применить ко всем элементам.

* {
margin: 0;
padding: 0;
}

Допускается наследование

#container * {
border: 1px solid black;
}

Поддерживает этот селектор IE6+ Firefox Chrome Safari Opera

X + Y

ul + p {
color: red;
}

Только первый абзац после каждого ul будет иметь красный текст
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X > Y

div#container > ul {
border: 1px solid black;
}

Будет рисоваться бордер только для ul внутри контейнера с id container
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X ~ Y

ul ~ p {
   color: red;
}

Тоже самое что и X + Y, только красным будут все абзацы
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X[title]

a[title] {
   color: green;
}

Ссылка что имеет внутри себя title, будет зеленым
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X[href="foo"]

a[href="http://veselov.sumy.ua"] {
  color:green;
}

Грубое объявление ссылки которая будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X[href*="ves"]

a[href*="ves"] {
color: #1f6053;
}

Объявление ссылки содержащая в себе "ves", будет иметь зеленый цвет
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X[href^="http"]

a[href^="http"] {
color:green;
}

Ссылки которые начинаються с http сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

Ссылки что заканчиваются на расширение .jpg сделать зелеными
Поддерживает этот селектор IE7+ Firefox Chrome Safari Opera

X:checked

input[type=radio]:checked {
border: 1px solid black;
}

Для всех input type radio при выборе рисовать бордер. демо (в примере поменять цвет на синий)
Поддерживает этот селектор IE9+ Firefox Chrome Safari Opera

XpseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

Первая линия абзаца

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Первая буква абзаца
Поддерживает этот селектор IE6+ Firefox Chrome Safari Opera

X:nth-child(n)

li:nth-child(3) {
color: red;
}

Красным третий li
Поддерживает этот селектор IE9+ Firefox 3.5+ Chrome Safari

X:nth-last-child(n) - тоже самое что и предыдущий только отсчет с конца

Их конечно больше. Но и эти как по мне редко используются. А сейчас бонус:

a {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
}

При наведении на ссылку сделает ее на 10% больше

div {
  background-color: #999; /* all browsers */
  *background-color: #ccc; /* add a * before the property - IE7 and below */
  _background-color: #000; /* add a _ before the property - IE6 and below */
}

Верстаем под разные версии ИЕ -)

div {
/* standards-compliant browsers */
opacity:0.7;

/* The following is ignored by standards-based browsers */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE8 */
filter: alpha(opacity=70); /* IE 5-7 */
}

Выставляем прозрачность с учетом версий ИЕ

a { white-space: nowrap; }

Не рвать ссылку на строки

Блог » Заметки / Теги: css, селектор, браузеры / 10.11.10 / Комментировать [0]

Назад 1 2 Далее

СОЗДАНИЕ САЙТОВ | Разработка сайтов - Veselov.sumy.ua

Интересные штуки с CSS #

3д буквы на CSS-е #

Симпатичная форма на css #

normalize.css - A modern, HTML5-ready, alternative to CSS resets #

Каскады CSS от Gala #

Напоминалка о селекторах в CSS #