Самоучитель CSS » Страница 3
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


  B
background
background-attachment
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
-----------------
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-left
-----------------
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
---------------
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
---------------
 C
caption-side
clear
clip
color
---------------
column-count
column-gap
column-rule
column-width
---------------
columns
content
counter-increment

---------------
counter-reset
cursor

---------------
 D
direction
display
---------------
 E
empty-cells

---------------
 H
height

---------------
 Q
quotes

---------------
 F
float
font
font-family
font-size
font-stretch
font-style
font-variant
font-weight

---------------
 L
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type

---------------
 M
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width

---------------
 O
opacity
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y
---------------
 P
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
position

---------------
 W
white-space
widows
width
word-break
word-spacing
word-wrap
writing-mode

---------------
 T
tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-overflow

---------------
text-shadow
text-transform
top
transform
transform-origin
transition
transition-delay
transition-duration
transition-property
transition-timing-function
---------------
 R
resize
right
---------------
 U
unicode-bidi

---------------
 V
vertical-align
visibility
---------------
 Z
z-index

---------------

Interner Explorer

-ms-interpolation-mode

-ms-radial-gradient
background-position-x
background-position-y

---------------
filter

hasLayout
scrollbar-3dlight-color
scrollbar-arrow-color
scrollbar-base-color

scrollbar-darkshadow-color
scrollbar-face-color
scrollbar-highlight-color
scrollbar-shadow-color
scrollbar-track-color
zoom
---------------
Firefox

-moz-border-bottom-colors
-moz-border-left-colors
-moz-border-right-colors
-moz-border-top-colors
-moz-linear-gradient
-moz-orient
-moz-radial-gradient
-moz-user-select
:-moz-placeholder
::-moz-selection
image-rendering
---------------
Opera

-o-linear-gradient
-o-object-fit
-o-radial-gradient
---------------
Safari и Chrome

-webkit-linear-gradient
-webkit-radial-gradient
-webkit-user-select
---------------
@-правила

@charset
@font-face
@import
@media
@page
---------------
Селекторы и их комбинации

A
#id
.class
.class1.class2
*
A   B
A > B
A + B
A ~ B
[attr]
[attr='value']
[attr^='value']
[attr$='value']
[attr*='value']
[attr~='value']
[attr|='value']
---------------
Псевдоклассы

:active
:checked
:default
:disabled
:empty
:enabled
:first-child
:first-letter
:first-line
:first-of-type
:focus
:hover
:indeterminate
:invalid
:lang
:last-child
:last-of-type
:link
:not
:nth-child
:nth-last-child
:nth-last-of-type
:nth-of-type
:only-child
:only-of-type
:optional
:read-only
:read-write
:required
:root
:target
:valid
:visited
---------------
Псевдоэлементы

::after (:after)
::before (:before)
::first-letter
::first-line
::selection

---------------
Функции

attr()
calc()
---------------
Значения свойств

Строки
Числа
Проценты
Размер
Адрес

Цвет
Угол
Медиа-запросы
inherit
initial

Календарь
Архив новостей
Наш опрос



Наши новости

      
      
  • 24 марта 2016, 16:20
Традиционно в начале января собираем лучшие публикации в нашем блоге про веб-дизайн за год — встречайте подборку 2016! Это отличная возможность быстро просмотреть все заметки и найти что-то интересное для себя, если случайно упустили. Читайте обзоры полезных сервисов и обучающие статьи по верстке,...
Просмотров: 1 418
Комментариев: 0
Сегодняшняя тема, как вы уже поняли, будет связана с применением социальных медиа работниками сферы дизайна и не только. Причем в отличии от статьи о полезных соц.сетях заметка будет касаться больше тематики карьеры дизайнера нежели его непосредственной деятельности. Вдохновением для написании...
Просмотров: 1 118
Комментариев: 0
Прошло уже больше половины осеннего сезона, а мы еще не опубликовали ни одной заметки по данной теме. В прошлом году к этому времени вы уже могли посмотреть красивые обои осени и скачать соответствующие текстуры. Именно поэтому сегодня решили сделать для вас пост с осенними логотипами, тем более,...
Просмотров: 1 185
Комментариев: 0
В данном блоге есть раздел Лучшие дизайны сайтов, где мы стараемся публиковать разные тематические подборки для вдохновения. Недавно, например, там была заметка с флеш проектами а тема сегодняшней статьи — красивые музыкальные сайты. Если в ближайшем будущем собираетесь создавать подобный шаблон,...
Просмотров: 1 687
Комментариев: 0
Большинство классических сайтов в интернете использует горизонтальное меню в качестве основного элемента навигации. Иногда в нем могут встречаться разные дополнительные фишки — многоуровневые конструкции, иконки для подпунктов, блок поиска, сложные списки и т.п. Недавно в блоге уже была небольшая...
Просмотров: 1 101
Комментариев: 0
Сейчас направление мобильного дизайна переживает настоящий бум: трафик с различных устройств стремительно растет, а новые приложения появляются как грибы после дождя. Поэтому не удивительно, что данной теме посвящено множество статей и даже создаются специальные сайты с интересными идеями для...
Просмотров: 1 256
Комментариев: 0
В далеком 2014 году мы публиковали интересную подборку дизайнов японских сайтов аниме. Наверняка вы догадываетесь, что работы там представлены достаточно специфические и оригинальные. Они сильно отличаются от общепринятых стандартных подходов к веб-дизайну, скажем, в Европе или США. Визуальное...
Просмотров: 1 166
Комментариев: 0
В комментариях к статье про 40 классных флеш сайтов 2010 справедливо заметили, что добрая половина ссылок уже не работает. После проверки материала я увидел удручающую картину – актуальными остались от силы 10 материалов. В принципе, это нормально, 6 лет ведь прошло с тех пор. А онлайн проектам...
Просмотров: 3 410
Комментариев: 0
В комментариях к статье блога про лучшие бесплатные фотостоки вы можете найти несколько вопросов касаемо авторского права для фотографий и изображений. На них попытался ответить сотрудник одного из фотобанков, но сегодня мне бы хотелось опубликовать чуть более разверную статью по данной теме и...
Просмотров: 2 516
Комментариев: 0
Ранее в блоге мы уже рассказывали про линейные градиенты и заодно приводили примеры разных сервисов-генераторов. Сегодня попробуем применить эти знания на практике для создания красивого градиента фона на CSS. Плюс в процессе работы познакомимся с интересной функцией skew для реализации...
Просмотров: 2 079
Комментариев: 0
Решил на своем сайте стандартным блокам в сайдбаре сделать закругленные углы с помощью CSS3. Раньше, помнится, чтобы реализовать данную задачу рисовали отдельные картинки для каждого угла и совмещали их с помощью нескольких DIV блоков в HTML. К счастью, сейчас все это легко задается в CSS стилях....
Просмотров: 1 218
Комментариев: 0
На современных сайтах можно встретить большое число самой разной по типу графики: изображения товаров, аватарки пользователей, картинки, формирующие дизайн страниц, кнопки, иконки, логотипы и т.д. И чем крупнее проект, тем больше графических файлов там используется. При открытии отдельной страницы...
Просмотров: 1 527
Комментариев: 0
29-03-2016, 12:31
Рамки и границы - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3
С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого — создание тени. Далее рассмотрим эти методы и их различия между собой....
Просмотров: 2 987
Комментариев: 0
29-03-2016, 12:25
Полупрозрачный фон - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать...
Просмотров: 3 494
Комментариев: 0
В CSS 2.1 свойство background-repeat имеет четыре значения: no-repeat, repeat, repeat-x и repeat-y. Хотя они, безусловно, полезны, но не позволяют полностью управлять процессом повторения и картинки будут обрезаны, если они не помещаются в контейнер точное число раз. CSS3 вводит два новых...
Просмотров: 2 840
Комментариев: 0
29-03-2016, 12:12
Матрица преобразований - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3
Многие веб-разработчики игнорируют матрицу преобразований, полагая её слишком сложной для понимания и используя взамен простейшие функции для трансформации. И совершенно зря, матрица преобразований обладает широкими возможностями, вдобавок, в том или ином виде поддерживаются всеми браузерами, а...
Просмотров: 3 632
Комментариев: 0
Существует несколько методов создания колонок равной высоты. Один из самых популярных и простых заключается в имитации колонок с помощью фонового рисунка. Код HTML при этом остаётся исходным, а в стилях добавляется только свойство background . Естественно, колонки будут иметь разную высоту,...
Просмотров: 3 051
Комментариев: 0
29-03-2016, 12:03
Картинка вместо чекбокса - «CSS3»
Рейтинг:
Категория: Самоучитель CSS / CSS3
Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в...
Просмотров: 5 377
Комментариев: 0
Я помню как делал первый свой словесный пузырь без картинок много лет назад. Для этого потребовалась многострочная функция javascript для введения элементов в DOM и ужасный CSS, который выглядел довольно страшно и не так хорошо работал в IE5. CSS3 начинает менять нашу жизнь к лучшему. Теперь можно...
Просмотров: 5 154
Комментариев: 0
В моей прошлой статье Как сделать словесный пузырь на CSS3 без картинок мы видели, как псевдоэлементы :before и :after используются для создания различных эффектов. В этой статье мы воспользуемся подобными техниками для создания разнообразных лент....
Просмотров: 2 880
Комментариев: 0
«Показать больше статей»
1 2 3 4 5 6 7 8 9 10 ... 16