Архив рубрики: CSS

Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

Список CSS хаков

/* хак только для IE8 Only */
.myClass {
color:red\0/; /* красный */
padding:70px\0/; /* отступ 70px только для Internet Explorer 8 */
}

/* IE 6 Only */
* html .myClass {

}

подробнее
Читать далее Список CSS хаков для разных браузеров, IE6, IE7, IE8, FireFox, Opera, Safari, Chrome

Как подключить свой(кастомный) шрифт на сайт?

Вначале загружаем сам файл шрифта с помощью [email protected] Внутри него пишем название гарнитуры шрифта через параметр font-family и путь к файлу через src

@font-face { font-family: Pompadur; /* Гарнитура шрифта */

src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ }

. Дальше используем шрифт как обычно.

h1 { font-family: Pompadur, ‘Comic Sans MS’, cursive; }

всплывающий tooltip на картинках

css
.MainImagescat { margin:53px 0 0 697px; }
.MainImagescat div { margin-bottom:29px; }
.MainImagescat div a { position:relative; display:block; width:268px; height:128px; background:url(./img/mainimages.png) 0 0 no-repeat; font-size:12px; color:#a8b0c5; text-transform:uppercase; }
.MainImagescat div a img { margin:2px 0 0 3px; position:absolute; }
.MainImagescat div a span.name { position:absolute; margin-left:3px; display:block; bottom:6px; height:0; overflow:hidden; width:260px; line-height:26px; background:url(./img/shadow1.png) 0 0 repeat; }
.MainImagescat div a span.name span { padding-left:10px; }

 

js

$(«.MainImagescat a»).hover(function(){
$(this).find(«span.name»).stop().animate({«height»:26});
}, function(){
$(this).find(«span.name»).stop().animate({«height»:0});
});

html

<div class=»MainImages»>

<div><a href=»#»><img border=»0″ src=»<?=$path_to_img?>» width=»160px» height=»150px» alt=»<?=$arFields[«NAME»];?>» title=»<?=$arFields[«NAME»];?>» /><span class=»name»><span> <?=$arFields[«CATALOG_PRICE_1»];?></span></span></a></div>
</div>

 

как изменять информационное собщение при изменении value selecta

выберите тариф
<select name=»tarif» id=»tarifff» onChange=»tariffs()»>
<option value=»Тестовый период»>Тестовый период</option>
<option value=»Стандартный»>Стандартный</option>
<option value=»Средний»>Средний</option>
<option value=»Максимальный»>Максимальный</option>
</select><br/>

<div id=»test» style=»display: block;»>бесплатно на 5 дней</div>
<div id=»st» style=»display: none;»>вы выбрали тариф станд</div>
<div id=»mid» style=»display: none;»>вы выбрали тариф сред</div>
<div id=»max» style=»display: none;»> вы выбрали тариф макс</div>

<script type=»text/javascript»>

function tariffs(){
tarvibor = document.getElementById(‘tarifff’).value;

if (tarvibor==’Тестовый период’){
$(‘#test’).css(‘display’,’block’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Стандартный’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’block’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Средний’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’block’);
$(‘#max’).css(‘display’,’none’);
}
if (tarvibor==’Максимальный’){
$(‘#test’).css(‘display’,’none’);
$(‘#st’).css(‘display’,’none’);
$(‘#mid’).css(‘display’,’none’);
$(‘#max’).css(‘display’,’block’);
}
};
</script>

Как сделать что бы при нажатии input исчезала надпись, а если ничего не ввели, то возвращалась?

<input type=»text» name=»EMAIL» value=»Ваш e-mail» onfocus=»if (this.value == ‘Ваш e-mail’) this.value = »;» onblur=»if (this.value == ») this.value = ‘Ваш e-mail’;» size=»25″ maxlength=»255″ />

Как сделать разворачивающиеся ссылки

CSS

<style>
.NewListText li a{
text-decoration: none;
border-bottom: 1px dashed;
font-size: 14px;
}
.NewListText li div { display:none; padding-bottom: 10px; }
.NewListText li.active div { display:block; }

</style>

JS

<script>
$(document).ready(function(){
$(«.NewListText li a»).click(function(){
$(this).parents(«.NewListText li»).toggleClass(«active»);
});
});
</script>

HTML

<ul class=»NewListText»>
<li><a href=»javascript:void(0);»>ССЫЛКА1</a>
<div>ТЕКСТ ТЕКСТ ТЕКСТ</div>
</li>

<li><a href=»javascript:void(0);»>ССЫЛКА2</a>
<div>ТЕКСТ-2 ТЕКСТ-2 ТЕКСТ-2</div>
</li>

</ul>

не забудьте в header подключить jquery

Симпатичные стили для формы (input,textarea)

#formazh input, textarea {
/*Borders and background color*/
border-radius: 6px;
-webkit-border-radius: 6px;
border: 1px solid #DADADA;
background: #F9F9F9;

/* Shadows*/
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);
-moz-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .15);

/*Font styles*/
font-family: «Trebuchet MS», Arial, Helvetica, sans-serif;
color: #747474;
font-size: 12;
font-style: italic;

/*Spacings*/
margin-top: 5px;
height: 18px;
line-height: 18px;
padding: 5px;
width: 200px;
outline: none;
}