Офис НП AMWAY в Ярославле
Офис Амвей в Ярославле
На карте Офис 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 Вопрос по переделке bb-кода
PHP, MySQL
311 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
2890 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
5433 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
3000 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
33203 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
2447 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
4308 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
4730 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
1751 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
6551 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
2774 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
4051 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
18662 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2144 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
9493 13 Pisatel
03. апреля 2015