11 заметок с тегом

css3 РСС

5 июля 2013, 12:42

Placeholder color

В последнее время все чаще меняю эти значения, решил себе схоронить
::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}
css3   placeholder

24 февраля 2012, 16:05

CSS3: анимация на примере вращения картинки вокруг своей оси :)

ЦСС3 крутая вещь, круче не придумать ;)
анимировать будем при наведении мыши на картинку
@keyframes rotate{ 
	/* создаем анимацию и даем ей имя (rotate например) */
	/* дальше задаем положение в начале и в конце */
	from { 
		/* 
			для анимации используем трансформацию вращение 
			есть ешё сдвиг translate(x,y) и увеличение scale(z)
		*/
		transform:  rotate(0);
		/* можно анимировать размеры и прочие парамтры цсс */
	}	
	to {
		transform: rotate(360deg);
	}

	/* или вместо from|to пишем процент выполнения сцены, от 0% до 100%, любой нужный */
	/* 
		так как поддерживают анимацию передовики Гекко и ВебКит, 
		запись выше не работает и каждому нужно написать свою
	*/


} 
@-moz-keyframes rotate{from {-moz-transform:  rotate(0);}	to {-moz-transform: rotate(360deg);}} 

@-webkit-keyframes rotate{from {-webkit-transform:  rotate(0);}	to {-webkit-transform: rotate(360deg);}} 
	

img {
	padding-right: 13px;
}
img:hover {
	/* анимировать будем при наведении мыши на картинку */
	border: 1px solid #C0C0C0;
	/* имя анимации, длительность, продолжительность циклов, "задержки" */
	animation: rotate 0.5s infinite linear; 
	-moz-animation: rotate 0.5s infinite linear;
	-webkit-animation: rotate 0.5s infinite linear;
	/* 
	
	-webkit-animation-name —  имя анимации
	-webkit-animation-duration — время проигрывания анимации
	-webkit-animation-timing-function — метод расчета промежуточных значений свойств для анимации
	-webkit-animation-delay — задержка анимации
	-webkit-animation-iteration-count — количество циклов анимации
	-webkit-animation-direction — направление анимации
	-webkit-animation-play-state — проигрывается ли анимация или стоит на паузе

	*/}


css3

30 января 2011, 22:53

Firefox CSS3 render fail (scroll lag)

На работе я разбаловался довольно мощным компом, потому многих вещей я просто не замечал. Этой весной моему домашнему бучеку будет 5 лет. Я им вполне доволен, 17» экран, 125фпс в ку3 (на настройках для игры) — но, фокс 3.6.13 очень лагает, когда на странице есть цсс3 градиентики и бокс-шадовс. Он просто реально умирает, и проц 100%. В остальных браузерах, вебкиты, говнооперы и ИЕ все ок, «ТАКИХ» лаг нет.

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

Частичной панацеей для бокс-шадов есть такая конструкция:
.shadow {-moz-border-image: url("/imgs/shadow.png") 10 / 3px;}
Где картинка выглядит вот-так http://deer.org.ua/images/shadow.png, ну а градиенты картинками, чего очень не хочется.

зы: и ещё, о цсс3 — для инпутов в ФФ до сих пор бордер-радиус не применяются, пока им не сменишь их бордер на любой другой.
css3   firefox

14 января 2011, 11:28

CSS3: Очень клёвый пример анимации



Если будет желание, расскажу подробно, что и как работает :)
css3

11 января 2011, 23:40

CSS3: transition

Транзишон — образно говоря, плавный переход значений свойств на промежутке времени. Появился в свежих браузерах ФФ4, ВебКиты, Жопера 11+. Применим в паре с псевдо-классами, например :hover.

Объявление имеет вид:
// on webkit base
a {
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease;
}
// or
a {
-webkit-transition: all 0.5s ease;
}

Пример:
a.foo {
padding: 5px 10px;
background-color: #69f;
color: #000;
-webkit-transition: all 0.5s ease;
}
a.foo:hover {
background-color: #33f;
color: #fff;
}

ps: взято с хабра.
css3

26 ноября 2010, 22:14

css3: linear gradient эссенция

.cool_gradient {
    background: #ebf1f6; /* old browsers */

background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0 ); /* ie */ }
css3

15 ноября 2010, 10:32

CSS3: Кроссбраузерный text-overflow в 7 строках

span
{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
    -moz-binding:url("ellipsisxul.xml#ellipsis");
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}

и
<?xml version="1.0"?>
<bindings 
xmlns="www.mozilla.org/xbl" 
xmlns:xbl="www.mozilla.org/xbl" 
xmlns:xul="www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text">
                    <children/>
                </xul:description>
            </xul:window>
        </content>
 
    </binding>
</bindings>

зы: подсмотрено с хабра
css3

11 июня 2010, 9:49

CSS3: Перевод больших строк в новый рядок (pre-wrap)

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}


css3

19 апреля 2010, 12:08

CSS3: button

Проскала статья на хабре, а красивой кнопке, сделанной на css3.

Нам нужен html:
<a class="button"><b class="o"><b class="m"><b>Post</b></b></b></a>

И сам css:
a.button {
	text-decoration: none;
	border-color: transparent transparent #ECECEC; /** rgba fallback **/
	border-color: transparent transparent rgba(255, 255, 255, 0.63);
	cursor: pointer;
	outline: none;
}
a.button:hover {
	text-decoration: none;
}
a.button,
a.button b.o,
a.button b.m {
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	display: block;
}
a.button b.o {
	border-color: #5A5A5A; /** rgba fallback **/
	border-color: rgba(0, 0, 0, 0.56);
}
a.button b.m {
	background: transparent url(button.png) repeat-x 0 0;
	border-color: #FFF transparent #C7C7C7; /** rgba fallback **/
	border-color: #FFF rgba(255, 255, 255, 0.33) rgba(255, 255, 255, 0.33);
}
a.button:hover b.m {
	background-position: 0 -80px;
}
a.button:active b.m {
	background-position: 0 -160px;
	border-color: #B7B7B7 transparent #D4D4D4; /** rgba fallback **/
	border-color: rgba(255, 255, 255, 0.11) rgba(255, 255, 255, 0.23) rgba(255, 255, 255, 0.27);
}
a.button b.m b {
	display: block;
	font-weight: bold;
	padding: 4px 8px;
	text-shadow: 0 1px 0 #DDD;
	color: #262626;
	/** Make the text unselectable **/
	-moz-user-select: none;
	-webkit-user-select: none;
}



ps: работает только в ФФ3.6 и вебкитах последних ;)
css3

14 апреля 2010, 7:43

CSS3: gradient

То что было в ИЕ всегда, хоть кривое, но было, в правильных браузерах появилось только сейчас
.gradient {
	/* for new webkit browsers */
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000));
	/* for firefox 3.6+ */
	background: -moz-linear-gradient(top,  #ccc,  #000);
	/* for IE */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000');
}
.gradient_sample {
	background: #999; /* for non-css3 browsers */
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); 
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); 
	background: -moz-linear-gradient(top,  #ccc,  #000); 
}
css3

13 января 2010, 16:28

CSS3: text-shadow

Везде уже модные крутые браузеры, которые хорошо поддерживают CSS3 (часть), картинок на сайтах скоро вообще не будет для декорации и выделения фонтов. Начнём с мелкого, рассмотрим text-shadow:
span{text-shadow: #color left top blur;}
По сути всё просто, указываем цвет, и отступы. Если указать минусовой отступ, тень поедет в другую сторону. Так же есть параметр blur, который тень размывает ;)

Выглядит довольно приятно
Простая тень
Обратная тень
Размазанная тень


Огненная тень
Также параметры могут быть множественные, то есть теней одному элементу можно задать сколько фантазии хватит, прописав их через запятую.

Код примера выше, выглядит вот-так
.fire {
	text-shadow:0 0 4px white, 
		0 -5px 4px #ff3, 
		2px -10px 6px #fd3, 
		-2px -15px 11px #f80, 
		2px -25px 18px #f20;
}

зы: владельцы говнобраузеров ничего не увидят.
css3