Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле
На карте Купить AMWAY в ЯрославлеПриобрести высококачественную продукцию Амвей в Ярославле, получить консультации по бизнесу, заказать продукцию или получить заказ:
Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
Телефон: +7 (920) 112-00-91
Email: matyxho@mail.ru
Сайт: https://www.amway.ru/user/lebedem
Визитка: http://yar.meweb.ru
FAQ (готовые сниппеты): CSSДобавить сниппет Авторизация Добавить сниппет
FAQ (готовые сниппеты) » CSS
"Режим отладки" стиля3D кнопка3D текстГоризонтальное центрирование
Горизонтальный списокВсе возможные варианты свойства borderВсплывающий текст при наведении курсора (hover)Выделяем кавычками цитату
Задаем первую заглавную букву в текстеКак закрыть анкор ссылки от пользователей, но не от поисковых роботов?Как подключить сторонний шрифт в CSS ?Как сделать, чтобы кнопки при наведении курсора реагировали?
Изменяем определенное в css правило для конкретного класса или элементаЛоготип Google средствами CSSЛоготип YouTube на чистом CSSИмитация загрузки ajax для больших изображений
Смещаем изображение влево, текст его будет плавно обтекатьСтиль ссылок в зависимости от назначения или формата файлаУбираем полосы прокрутки
"Режим отладки" стиля
Добавив следующий код себе в таблицу стилей, можно "отловить" устаревшие (устаревающие) или пустые теги
Код: CSS
/* Пустые элементы */
.debug div:empty, .debug span:empty, .debug li:empty, .debug p:empty, .debug td:empty, .debug th:empty {
padding: 20px;
border: 5px dotted yellow !important;
}
/* Пустые атрибуты */
.debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] {
border: 5px solid yellow !important;
}
/* Устаревшие элементы */
.debug applet, .debug basefont, .debug center, .debug dir, .debug font, .debug isindex, .debug menu, .debug s, .debug strike, .debug u {
border: 5px dotted red !important;
}
/* Устаревшие атрибуты */
.debug *[background], .debug *[bgcolor], .debug *[clear], .debug *[color], .debug *[compact], .debug *[noshade], .debug *[nowrap], .debug *[size], .debug *[start],.debug *[bottommargin], .debug *[leftmargin], .debug *[rightmargin], .debug *[topmargin], .debug *[marginheight], .debug *[marginwidth], .debug *[alink], .debug *[link], .debug *[text], .debug *[vlink], .debug *[align], .debug *[valign],.debug *[hspace], .debug *[vspace],.debug *[height], .debug *[width], .debug ul[type], .debug ol[type], .debug li[type] {
border: 5px solid red !important;
}
/* Предлагаемые к устареванию элементы */
.debug input[type="button"], .debug big, .debug tt {
border: 5px dotted #33FF00 !important;
}
/* Предлагаемые к устареванию атрибуты */
.debug *[border], .debug table[cellpadding], .debug table[cellspacing] {
border: 5px solid #33FF00 !important;
}



Далее просто добавим в корень страницы класс debug
Код: HTML
    <body>
<div class='debug'>
<!-- здесь содержимое страницы -->
</div>
</body>



Все проблемные элементы будут подсвечены, а дальше уж сами решайте, что с ними делать.
Добавлено: Опубликовал  Pisatel Pisatel
Теги сниппета: css режим отладки style error 

Вверх
3D кнопка
Красивая серая 3д кнопка

Код: CSS
.submit {
width: 120px;
height: 32px;
padding: 0 0 2px;
font: 16px 'Trebuchet MS', Tahoma, Arial, sans-serif;
outline: none;
position: relative;
cursor: pointer;
border-radius: 3px;
color: #555;
border: 1px solid #BBB;
border-top: 1px solid #D0D0D0;
border-bottom: 1px solid #A5A5A5;
text-shadow: 1px 1px #FAFAFA;
box-shadow: inset 0 1px #F5F5F5, inset 1px 0 #EDEDED, inset -1px 0 #EDEDED, inset 0 -1px #E7E7E7, 0 2px #B2B1B1, 0 3px #A5A5A5, 0 4px 2px rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); /* IE10+ */
background: linear-gradient(top, #eeeeee 0%, #e2e2e2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */
background-color: #E8E8E8;
}
.submit::-moz-focus-inner{ border:0; }
.submit:hover {
border-top: 1px solid #C2C2C2;
box-shadow: inset 0 1px #EFEFEF, inset 1px 0 #EDEDED, inset -1px 0 #EDEDED, inset 0 -1px #EDEDED, 0 2px #B2B1B1, 0 3px #A5A5A5, 0 4px 2px rgba(0,0,0,0.4);
background: -moz-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #e9e9e9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* IE10+ */
background: linear-gradient(top, #e4e4e4 0%, #e9e9e9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e4e4e4', endColorstr='#e9e9e9',GradientType=0 ); /* IE6-9 */
background-color: #E8E8E8;
}
.submit:active {
top: 3px;
border: 1px solid #B9B9B9;
border-top: 1px solid #959595;
border-bottom: 1px solid #CACACA;
background: #E3E3E3;
box-shadow: inset 0 1px 2px #B9B9B9;
}


Добавлено: Опубликовал  FileMan FileMan Добавлено  16 июня 2014 09:05:55 16. июня 2014 Последнее обновление:  23 мая 2015 16:06:26 23 мая 2015 16:06:26

Вверх
3D текст
3д текст
Код: CSS
p {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}


Добавлено: Опубликовал  FileMan FileMan Добавлено  16 июня 2014 08:42:45 16. июня 2014
Теги сниппета: 3d текст эффекты эффект 3d text css 

Вверх
Горизонтальное центрирование
Выравниваем сайт или отдельный элемент по центру( класс имеет фиксированную ширину в пикселах, однако ее можно задавать и в процентах)
Код: CSS
.center {
width: 1000px;
margin: 0 auto;
}
/*для класса center мы задали ширину 1000px, отступ сверху и снизу- 0px, справа и слева- отступ авто*/
body {
width: 95%;
margin: 5px auto;
}
/*для тела всего документа мы задали ширину в 95% (резиновый дизайн), отступ сверху и снизу экрана- 5px, справа и слева- авто*/


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Горизонтальный список
Располагаем элементы списка горизонтально
Код: CSS
ul {
display: inline-block;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: auto;
}
ul li {
display: block;
float: left;
list-style: none;
margin-left: 30px;
padding: 0;
position: relative;
width: auto;
}
ul li:first-child {
margin-left: 0;
}


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Все возможные варианты свойства border
Код: CSS
.solid {
border: 3px solid #000;
} /* сплошная линия */
.dashed {
border: 3px dashed #000;
} /* штрих-пунктирная линия */
.double {
border: 3px double #000;
} /* линия с двойной обводкой */
.groove {
border: 3px groove #1b8200;
} /* двойная линия с "тенями" */
.ridge {
border: 3px ridge #000;
} /* обратная двойная линия с "тенями" */
.dotted {
border: 3px dotted #000;
} /* линия, состоящая из точек */
.outset {
border: 3px outset #1b8200;
} /* линия с "тенью" в правой части снизу */
.inset {
border: 3px inset #000;
} /* линия с "тенью" в левой части сверху */


Добавлено: Опубликовал  Pisatel Pisatel Добавлено  16 июня 2014 12:25:18 16. июня 2014 Последнее обновление:  16 июня 2014 12:27:17 16 июня 2014 12:27:17
Теги сниппета: border css эффект эффекты 

Вверх
Всплывающий текст при наведении курсора (hover)
Данный эффект достигается без применения js, только стили.
Стиль
Код: CSS
#mainwrapper {  
font: 10pt normal Arial, sans-serif;
height: auto;
margin: 80px auto 0 auto;
text-align: center;
width: 660px;
}

#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 172px;
float: left;
margin-bottom: 20px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}

#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
width: auto;
height: 100%;
}


#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 280px;
height: 152px;
text-align: left;
padding: 15px;
}

#mainwrapper .box:hover .fade-caption {
opacity: 1;
}



Разметка
Код: HTML
    <div id='mainwrapper'>
<div class='box'>
<img src='http://meweb.ru/images/yourimage.jpg' alt='image' />
<span class='caption fade-caption'>
<h3>Здесь текст, который будет появляться при наведении</h3>
</span>
</div>
</div>


Добавлено: Опубликовал  Pisatel Pisatel Добавлено  16 июня 2014 12:30:32 16. июня 2014

Вверх
Выделяем кавычками цитату
Код: CSS
.mydiv strong {
quotes: '\ab' '\bb';
}
.mydiv strong:before {
content: open-quote;
}
.mydiv strong:hover:before {
content: no-open-quote;
}
.mydiv strong:after {
content: close-quote;
}
.mydiv strong:hover:after {
content: no-close-quote;
}



При наведении курсора на цитату кавычки будут исчезать. Реализация
Код: HTML
<div class='mydiv'>Обычный текст, будет выводиться без кавычек. <strong>Этот текст будет с кавычками, при наведении они пропадут</strong></div>


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Задаем первую заглавную букву в тексте
Буквица- вроде так это называется: первая буква текста, находящаяся в теге <p> будет иметь заданный размер, цвет и вид шрифта. Добавляем в свой css:
Код: CSS
p:first-letter{
display: block;
margin: 5px 2px 2px 5px;
float: left;
color: #FF3366;
font-size: 30px;
font-family: Georgia;
}


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Как закрыть анкор ссылки от пользователей, но не от поисковых роботов?
Задали мне подобный вопрос на одном из форумов- уж не знаю, зачем потребовалось. Почесав немного репу, нашел лучшее, на мой взгляд, решение. Смотрим:
Код: HTML
    <a href='/newcat' title='Закрываем анкор ссылки от пользователей, но не от поисковых систем'><span style='display: none;'>Здесь будет анкор, который не увидят пользователи, но прекрасно будут видеть поисковики</span></a>


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Как подключить сторонний шрифт в CSS ?
Сторонние шрифты- весьма вкусное дополнение для юзабилити сайта. Подключить сторонний шрифт можно следующим способом( он может находится как у тебя на сервере, так и на сторонних ресурсах) :
Код: CSS
@font-face {
font-family: Yourfont;
/* имя шрифта для CSS правил */
src: local("Yourfont"),
/* проверяем наличие шрифта в ОС пользователя */
url(themes/Yourfont.ttf);
/* если шрифт не установлен, тогда загружаем его по указанному пути */
}



Данным способом можно подключать шрифты формата OTF и TTF.
Ну и, безусловно, костыль для IE, которому нужен формат EOT, куда уж без него...
Код: CSS
/* только для IE */
@font-face {
font-family: Yourfont;
/* имя шрифта для CSS правил */
src: local("Yourfont"),
/* проверяем наличие шрифта в ОС пользователя */
url(themes/Yourfont.eot);
/* если шрифт не установлен, тогда загружаем его по указанному пути */
}



Ну и вот конечный рабочий вариант:
Код: CSS
@font-face {
font-family: 'Yourfont';
src: url('themes/Yourfont.eot');
src: url('themes/Yourfont.eot') format('embedded-opentype'),
url('themes/Yourfont.ttf') format('truetype');
}


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Как сделать, чтобы кнопки при наведении курсора реагировали?
Добавив в свой css- файл всего одну строчку, ты оживишь кнопки при наведении на них курсора и превратишь курсор мыши в значок руки:
Код: CSS
input[type="button"] {
cursor: pointer;
}


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Изменяем определенное в css правило для конкретного класса или элемента
Свойство !important на конце будет переопределять заданное правило для таблицы каскадных стилей или линейных стилей:
Код: CSS
p {
font-size: 16px !important;
}


Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Логотип Google средствами CSS
Логотип Google на чистом CSS и HTML. Стиль:
Код: CSS
@font-face {
font-family: 'Catull';
src: url('fonts/catull-regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
.google-logo {
font: 8em/2em Catull;
text-shadow: 0 3px 3px rgba(0, 0, 0, .25);
}
.google-logo>span {
color: #133BC1;
}
.google-logo>span>span {
color: #E33B21;
}
.google-logo>span>span>span {
color: #E6B500;
}
.google-logo>span>span>span>span {
color: #4BCE54;
}
.google-logo>span>span>span>span>span {
color: #0048E3;
}
.google-logo>span>span>span>span>span>span {
color: #E33B21;
}



Разметка:
Код: HTML
    <div class='google-logo'>
<span>G<span>o<span>o<span>g<span>l<span>e</span></span></span></span></span></span>
</div>



Шрифт можно скачать здесь.
Добавлено: Опубликовал  Pisatel Pisatel Добавлено  10 июня 2015 23:30:32 10. июня 2015 Последнее обновление:  10 июня 2015 23:36:01 10 июня 2015 23:36:01

Вверх
Логотип YouTube на чистом CSS
Стиль:
Код: CSS
body, html {
height: 100%;
background-color: #EBEBEB;
overflow-y: hidden;
}
.separator {
height: 50%;
}
.logo {
margin: -150px 0;
height: 300px;
text-align: center;
font-size: 160px;
font-family: Impact, 'Arial Black';
line-height: 300px;
}
#You {
text-shadow: .02em .02em 0.06em rgba(0,0,0,0.4);
}
#Tube {
position: relative;
padding: 0 15px;
background-image: -webkit-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -moz-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -o-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: -ms-linear-gradient(bottom, rgb(109, 2, 2) 22%, rgb(201, 0, 0) 61%);
background-image: linear-gradient(bottom, #6D0202 22%, rgb(201, 0, 0) 61%);
color: #fff;
letter-spacing: -6px;
text-shadow: 0 3px 0 #000;
border-radius: 50% / 11%;
box-shadow: 0px 15px 20px -5px rgba(0, 0, 0, 0.67);
}



Разметка:
Код: HTML
<div class='separator'></div>
<div class='logo'>
<span id='You'>You</span>
<span id='Tube'>Tube</span>
</div>



Демо: Логотип YouTube на чистом CSS
Добавлено: Опубликовал  Pisatel Pisatel Добавлено  23 мая 2015 12:23:45 23. мая 2015 Последнее обновление:  31 октября 2016 22:54:17 31 октября 2016 22:54:17

Вверх
Имитация загрузки ajax для больших изображений
Следующее добавленное в твой css свойство задаст всем изображениям прелоадер- некое подобие имитации загрузки на ajax:
Код: CSS
img {
background: url(loader.gif) no-repeat 50% 50%;
}



Не забудь добавить картинку loader.gif к себе на сайт.
Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Смещаем изображение влево, текст его будет плавно обтекать
Часто можно видеть в блогах или новостях, что изображение смещено влево или вправо, а текст его плавно обтекает. Делается это несложно: тебе нужно будет лишь добавить класс к изображению, свойство для которого мы сейчас создадим:
Код: CSS
.left {
float: left;
margin: 5px;
}



То есть, теперь изображение, которое ты пропишешь так
Код: HTML
<img class='left' src='/pic.jpg' alt='image' />



будет смещено влево и текст его будет плавно обтекать. Можно сделать еще проще: если весь текст у тебя выводится в одном классе, например, .article, то зададим для всех изображений, которые окажутся в этом классе, смещение с обтеканием:
Код: CSS
.aricle img {
float: left;
margin: 5px;
}



Надеюсь, ход моих мыслей понятен.
Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Стиль ссылок в зависимости от назначения или формата файла
Код: CSS
a[href^='http://'] {
padding-right: 20px;
background: url(external.gif) no-repeat center right;
} /* обычная ссылка */
a[href^='mailto:'] {
padding-right: 20px;
background: url(email.png) no-repeat center right;
} /* email */
a[href$='.pdf']{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
} /* .pdf */



Думаю, смысл понятен.
Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Убираем полосы прокрутки
Если вертикальную полосу прокрутки еще можно как-то вынести, то горизонтальная- вообще беда. Возникают они, в основном, тогда, когда текст не помещается в контейнер( блок), либо сама полоса изначально задана параметром overflow {}. Избавляемся от этого безобразия просто:
Код: CSS
p {
word-wrap: break-word;
}



Данный параметр задаст перенос текста на новую строку. Он не совсем валиден, но для меня лично отсутствие полосы прокрутки важнее валидности. Не забудь, что p - это лишь для наглядности, добавлять это свойство можно к любому элементу
P.S. Данный параметр будет работать только с текстом
Добавлено: Опубликовал  Pisatel Pisatel

Вверх
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
12589 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3154 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
12847 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7530 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
6703 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
51196 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3899 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
7869 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
8804 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2909 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5452 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7401 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
39555 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3592 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13367 13 Pisatel
03. апреля 2015