Закругленные углы используя CSS

Сейчас чутли не на каждом сайте используются блоки с закруглёнными углами. Я хочу рассмотреть пример создания такого эффекта для блока с заголовком и каким либо текстом.
В данном приёме используется два изображения : round-l.png и round-r.png.
HTML разметка выглядит следующим образом:<div class=”rounded-corners”>
<h3>Заголовок</h3>
<div>
<p>Текст</p>
</div>
</div>
Теперь, самое интересное, начнём работать над CSS. Распишем бекграунды:.rounded-corners{
background:transparent url(ound-l.png) no-repeat left top;
}
.rounded-corners h3{
background:transparent url(round-r.png) no-repeat […]

Подключение таблиц стилей для браузеров IE, Opera, Safari

Иногда бывает необходимо для достижения кроссбраузерности определить разные стили элемента для различных браузеров. Можно пойти в сторону использования css хаков, но я хочу описать альтернативній вариант, как мне кажется более правильный.
Итак, для IE используем всем знакомые сonditional сomments <!–[if IE ]>
<link rel=”stylesheet” type=”text/css” href=”style/ie.css” />
<![endif]–>
Для Opera <script type=”text/javascript”>
<!–
if(window.opera) {document.write(’<link rel=”stylesheet” type=”text/css” href=”style/opera.css” />’);}
//–>
</script>
Для Safari […]

Изменение CSS свойства с помощью JavaScript

Часто бывает необходимо изменить css свойсва элемента динамически, используя javascript. Для этого используеться следующая конструкция:document.getElementById(div_id).style.JS_property_reference = “new_CSS_property_value”;
В таблице приведены CSS Property’s и соответствующие им JavaScript Reference’s.

CSS Property
JavaScript Reference

background
background

background-attachment
backgroundAttachment

background-color
backgroundColor

background-image
backgroundImage

background-position
backgroundPosition

background-repeat
backgroundRepeat

border
border

border-bottom
borderBottom

border-bottom-color
borderBottomColor

border-bottom-style
borderBottomStyle

border-bottom-width
borderBottomWidth

border-color
borderColor

border-left
borderLeft

border-left-color
borderLeftColor

border-left-style
borderLeftStyle

border-left-width
borderLeftWidth

border-right
borderRight

border-right-color
borderRightColor

border-right-style
borderRightStyle

border-right-width
borderRightWidth

border-style
borderStyle

border-top
borderTop

border-top-color
borderTopColor

border-top-style
borderTopStyle

border-top-width
borderTopWidth

border-width
borderWidth

clear
clear

clip
clip

color
color

cursor
cursor

display
display

filter
filter

font
font

font-family
fontFamily

font-size
fontSize

font-variant
fontVariant

font-weight
fontWeight

height
height

left
left

letter-spacing
letterSpacing

line-height
lineHeight

list-style
listStyle

list-style-image
listStyleImage

list-style-position
listStylePosition

list-style-type
listStyleType

margin
margin

margin-bottom
marginBottom

margin-left
marginLeft

margin-right
marginRight

margin-top
marginTop

overflow
overflow

padding
padding

padding-bottom
paddingBottom

padding-left
paddingLeft

padding-right
paddingRight

padding-top
paddingTop

page-break-after
pageBreakAfter

page-break-before
pageBreakBefore

position
position

float
styleFloat

text-align
textAlign

text-decoration
textDecoration

text-decoration: blink
textDecorationBlink

text-decoration: line-through
textDecorationLineThrough

text-decoration: none
textDecorationNone

text-decoration: overline
textDecorationOverline

text-decoration: underline
textDecorationUnderline

text-indent
textIndent

text-transform
textTransform

top
top

vertical-align
verticalAlign

visibility
visibility

width
width

z-index
zIndex

источник

PNG24 в IE

Использование фильтра AlphaImageLoader

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’image.png’, sizingMethod=’scale’)

sizingMethod может принимать несколько значений:

crop - изображение обрезаеться под размеры блока;
image - блок принимает размеры изображения;
scale - изображение маштабируеться под размеры блока.

При использовании этого метода есть определённые особенности:

у элемента должны быть заданы height или width;
это не бекграунд,поэтому таких свойств как background-position, background-repeat, background-attachment просто нет.

При использовании ссылок и данного метода советую […]

Острый угол

Сегодня долго изучал Zig-zag menu. Волновал меня вопрос как сделаны острые углы в элементах меню.
Долго я мучал firebug в поиске куда же они впихнули бекграунды?!?
Каково же было мое удивление когда я наконец то нашел в чем зарыта собака!

border-right:25px solid #66AADD;
border-top:25px dashed transparent;

все гениальное просто))

3px при использовании float в IE

Все наверно сталкивались с проблемой лишних 3 пикселей при использовании обтекания в ие. Лично я от этого избавляюсь так:

.left{
float:left;
}
* html .right{
position:relative;
left:-3px;
margin-right:-3px;
}

Пуленепробиваемый Web-дизайн

Закончил читать книгу Пуленепробиваемый Web-дизайн

В книге описаны интересные приемы:

использование относительный величин для задания размера шрифта
меню,которое не ломаеться при увеличении шрифта
верстка блоков с учетом заранее неизвестного количества текста, также с закругленными углами
работа с изображниями и float
table + css
резиновая разметка header + 2 colums + footer,header + 3 colums + footer, ложные колонки

Одна из немногих […]

Предзагрузка картинок с помощью css

Сдесь представлено очень интересное решение для предзагрузки картинок.

#preloadedImages {
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
[…]

CSS селекторы

Страница с полезной таблицей css селекторов и совместимости броузеров с ними. Также при наведении курсора на селектор можно посмотреть пример.
А на этой странице проверяеться какие селекторы поддерживает ваш броузер

Закругленные углы с помощью CSS

wcode.ru -рамки таблиц с округленными краями без использования графики
webstudent.ru - закругленные углы с помощью CSS
schillmania.com - More Rounded Corners with CSS
albin.net - Bullet-Proof Rounded Corners
virtuelvis.com - Rounded corners in CSS
fireandknowledge.org - Rounded Corners Without Images
sitepoint.com - Rounded Corners with CSS and JavaScript
svay.com - Coins arrondis en […]

« go back — keep looking »