Офис НП 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 кнопка 3d button button 3d effect css эффекты эффект 

Вверх
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 center horizontal center 

Вверх
Горизонтальный список
Располагаем элементы списка горизонтально
Код: 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 hover эффект всплывающий текст курсор 

Вверх
Выделяем кавычками цитату
Код: 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
Теги сниппета: убрать полосы прокрутки css overflow 

Вверх
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 19234 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 53856 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 13437 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 15708 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 115800 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 12169 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 19447 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 22343 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 6714 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 32028 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 10501 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 16334 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 104412 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 7934 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 21554 13 Pisatel
03. апреля 2015