Все сниппеты с тэгом «css»
- Репутация: 260
- Сниппеты: 53
- Ревизии: 7
Быстрый способ добавить цветовой оверлей на фоновое изображение
.block_business {
background: linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
url('https://images.unsplash.com/photo-1524758631624-e2822e304c36');
}
Результат:
- Репутация: 37
- Сниппеты: 5
- Ревизии: 0
Мы хотим поделиться с вами вдохновляющими адаптивными прайс-таблицами сделанными на флексбоксе. Прайс-таблицы являются основной частью лендингов и сайтов на которых предлагают цифровые или другие платные услуги.
- Репутация: 11
- Сниппеты: 11
- Ревизии: 0
Простая функция, которая переберет в цикле нужные вам для проверки свойства CSS и проверит поддерживает ли их браузер.
function checkCssSupport(containerSelector) {
var supportValues = [
{
feature: "display",
value : "flex",
}
], supportIndex, curFeature,
curValue, notSupportedClass;
for (supportIndex in supportValues) {
curFeature = supportValues[supportIndex].feature;
curValue = supportValues[supportIndex].value;
notSupportedClass = 'no-' + curValue + '-support';
$(containerSelector).addClass(notSupportedClass);
if (typeof(CSS) !== 'undefined') {
if (CSS.supports(curFeature, curValue)) {
$(containerSelector).removeClass(notSupportedClass);
}
}
}
}
Button framework на stylus
- Репутация: 5
- Сниппеты: 3
- Ревизии: 1
//-//////////////////////////////////////////////////////////
//- Mixins
//-//////////////////////////////////////////////////////////
button-style(color, color-hover, background, background-hover, border, border-hover)
&
&:visited
color color
background-color background
if border
border-color border
&:focus
&:hover
&:active
if color-hover
color color-hover
else
color color
if background-hover
background-color background-hover
else
background-color background - 10%
if border-hover
border-color border-hover
else
if border
border-color border - 25%
&:active
background-image none
&.button
&_disabled
&[disabled]
&
&:hover
&:focus
&:active
color color
background-color background
border-color border
button-size(padding, font-size, line-height)
padding padding
font-size font-size
if line-height
line-height line-height
//-//////////////////////////////////////////////////////////
//- Base style
//-//////////////////////////////////////////////////////////
.button
display inline-block
margin-bottom 0
font-weight normal
text-align center
vertical-align middle
touch-action manipulation
cursor pointer
background-image none
border-color transparent
border-style solid
border-width 0
border-radius 0
white-space nowrap
line-height normal
-webkit-user-drag none
-webkit-user-select none
-moz-user-select none
-ms-user-select none
user-select none
box-sizing border-box
text-decoration none
background-color transparent
padding 0
transition 125ms all ease-in-out
&__icon
&__text
display inline-block
vertical-align middle
line-height 1
&__icon + &__text
&__text + &__icon
margin-left 8px
&__icon
fill currentColor
&:focus
&:active:focus
outline thin dotted
outline 5px auto -webkit-focus-ring-color
outline-offset -2px
&:hover
&:focus
color #333333
text-decoration none
&:active
&_active
outline 0
background-image none
box-shadow inset 0 3px 5px rgba(0 0 0 0.125)
&_disabled
&[disabled]
&
&:hover
&:focus
&:active
opacity 0.65
box-shadow none
outline none
a&_disabled
pointer-events none
//- Block button
.button_block
display: block;
width: 100%;
& + &
// margin-top: 10px;
input[type="submit"]&
input[type="reset"]&
input[type="button"]&
width: 100%;
//-//////////////////////////////////////////////////////////
//- Button sizes
//-//////////////////////////////////////////////////////////
.button
.button_size_normal
button-size(
padding: 18px 20px,
font-size: 18px,
line-height: 1.4
)
.button_size_extra-large
button-size(
padding: 26px 32px,
font-size: 22px,
line-height: 1.4
)
.button_size_large
button-size(
padding: 22px 28px,
font-size: 20px,
line-height: 1.4
)
.button_size_small
button-size(
padding: 10px 18px,
font-size: 16px,
line-height: 1.4
)
.button_size_extra-small
button-size(
padding: 6px 12px,
font-size: 14px,
line-height: 1.4
)
//-//////////////////////////////////////////////////////////
//- Styles and colors
//-//////////////////////////////////////////////////////////
// Ghost
.button_style_ghost
border-width 1px
.button_style_ghost.button_color_white
button-style(
color: #fff,
color-hover: #333,
background: transparent,
background-hover: #fff,
border: #fff,
border-hover: #fff
)
.button_style_ghost.button_color_red
button-style(
color: #f05050,
color-hover: #fff,
background: transparent,
background-hover: #f05050,
border: #f05050,
border-hover: #f05050
)
// Solid
.button_style_solid.button_color_light-green
button-style(
color: #545454,
color-hover: false,
background: #dcefd6,
background-hover: false,
border: false,
border-hover: false
)
.button_style_solid.button_color_green
button-style(
color: #fff,
color-hover: false,
background: #52ae32,
background-hover: false,
border: false,
border-hover: false
)
// Transparent
.button_style_transparent.button_color_white
button-style(
color: #fff,
color-hover: false,
background: transparent,
background-hover: false,
border: false,
border-hover: false
)
- Репутация: 1
- Сниппеты: 1
- Ревизии: 0
Для создания сайтов или веб-приложений в материальном дизайне есть отличный framework Material Design Lite, но он дает лишь основу. Мы попытаемся создать плавающую кнопку, которая будет исчезать при прокрутке страницы вниз и появляться при прокрутке вверх.
Внимание! код не претендует на супер оригинальность, возможно, что-то можно было сделать по-другому, но в своё время было потрачено много времени для изучения подобных мелочей, которые сейчас кажутся простыми. Надеюсь, код кому-нибудь поможет.
Для начала подключим стили и скрипт MDL, а также подлючим JQuery, с помощью которого мы будем реализовывать исчезновение/появление кнопки.
<!--JQuery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--MDL-->
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Добавим кнопку на страницу и создадим сss свойства для неё. Остальные классы базовые для фреймворка.
.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}
<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
Теперь кнопка жестко привязана к правому нижнему углу с помощью параметра position:fixed и right:10px;bottom:10px;. Создадим два стиля: первый - это анимация уплывания кнопки вниз, а второй - сворачивание внутрь себя (не знаю как назвать этот эффект).
.scale-zero{ // сворачивание кнопки
transform: scale(0,0);
transition: all 0.1s linear;
}
.scale-one{ // разворачивание кнопки
transform: scale(1,1);
transition: all 0.1s linear;
}
.translate-down { // уплывание вниз кнопки
transform: translate(0,120%);
transition: all 0.1s linear;
}
.translate-up { // всплывание вверх кнопки
transform: translate(0,0);
transition: all 0.1s linear;
}
Осталось только добавить скрипт, который будет отслеживать скролл страницы и добавлять нужные классы к кнопке
var scroll = $(window).scrollTop(); // переменная, с помощью который мы будем узнавать куда скроллиться страница
$(window).scroll ( function() { //отслеживаем скроллится ли страница
transform('mdl-float-button','translate-up','translate-down'); //параметры для уплывания кнопки
transform('mdl-float-button','scale-one','scale-zero'); //параметры для сворачивания кнопки
})
function transform (selector,classOne,classTwo) { // функция, которая определяет куда прокручивается список и добавляет/удаляет нужные классы кнопке
if ($('.'+selector).length != 0) {
if ($(window).scrollTop() - 20 > scroll) { // -20 используется лишь для того, чтобы кнопка пропадала не сразу, а после непродолжительного скролла. Данная штука сделана для красоты
$('.'+selector).removeClass(classOne);
$('.'+selector).addClass(classTwo);
scroll = $(window).scrollTop();
}
if ($(window).scrollTop() + 20 < scroll) { // +20 использется по той же причине, что и выше
$('.'+selector).removeClass(classTwo);
$('.'+selector).addClass(classOne);
scroll = $(window).scrollTop();
}
}
}
Вот собственно и всё, что нужно для создания плавающей кнопки.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.scale-zero{
transform: scale(0,0);
transition: all 0.1s linear;
}
.scale-one{
transform: scale(1,1);
transition: all 0.1s linear;
}
.translate-down {
transform: translate(0,120%);
transition: all 0.1s linear;;
}
.translate-up {
transform: translate(0,0);
transition: all 0.1s linear;;
}
.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}
</style>
<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<script>
var scroll = $(window).scrollTop();
$(window).scroll ( function() {
console.log($('#option-1').prop('checked'))
if ($('#option-1').prop('checked')) {transform('mdl-float-button','translate-up','translate-down');}
else {transform('mdl-float-button','scale-one','scale-zero');}
})
function transform (selector,classOne,classTwo) {
if ($('.'+selector).length != 0) {
if ($(window).scrollTop()> scroll) {
$('.'+selector).removeClass(classOne);
$('.'+selector).addClass(classTwo);
scroll = $(window).scrollTop();
}
if ($(window).scrollTop() < scroll) {
$('.'+selector).removeClass(classTwo);
$('.'+selector).addClass(classOne);
scroll = $(window).scrollTop();
}
}
}
</script>
5-колонок на Bootstrap
- Репутация: 17
- Сниппеты: 2
- Ревизии: 0
Данный пример попытка развеять заблуждение: "нельзя на bootstrap сделать сетку с нечетным количеством колонок"
// Откуда пошло название класса 2_4: 12/5 == 2.4, хак но рабочий. (:
// При желании название могут изменены на более читаемые.
.five-cols-row {
@five-cols-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
.make-row(@five-cols-gutter); // используем мощь grid-framework.less
.col-lg-2_4 {
.make-lg-column(2.4; @five-cols-gutter); // для lg-устройств
}
.col-md-2_4 {
.make-md-column(2.4; @five-cols-gutter); // для md-устройств
}
.col-sm-2_4 {
.make-sm-column(2.4; @five-cols-gutter); // для sm-устройств
}
.col-xs-2_4 {
.make-xs-column(2.4; @five-cols-gutter); // для xs-устройств
}
}
// Боллее красивый вариант
.content-row {
@content-columns: (@grid-columns/5); // 12/5
@content-gutter: @grid-gutter-width; // отступ между колонками по умолчанию 30px, но можно обнулить
.make-row(@content-gutter); // используем мощь grid-framework.less
> .col-content {
.make-lg-column(@content-columns; @content-gutter); // для lg-устройств
.make-md-column(@content-columns; @content-gutter); // для md-устройств
.make-sm-column(@content-columns; @content-gutter); // для sm-устройств
.make-xs-column(@content-columns; @content-gutter); // для xs-устройств
}
}
- Репутация: 99
- Сниппеты: 11
- Ревизии: 1
Разметка HTML:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
$columns: 4; // количество колонок
.parent {
display: flex;
flex-flow: row wrap;
}
.child {
flex: 1 0 100%/$columns;
background: #222;
min-height: 15vh;
box-sizing: border-box;
border: 5px solid #fff;
}
.child:nth-last-child(2):nth-child(#{$columns}n) {
min-width: 50%;
}
Создаём namespace для CSS
- Репутация: 8
- Сниппеты: 1
- Ревизии: 0
Как известно css страдает от нехватки Namespace. Классы забиваются только в глобальную область видимости, что соответственно рано или поздно приводит к конфликту имён. Реализуем пространства имён через префиксы. Они позволят нам определить тип класса/объекта.
l- layout. Используется для структурных объектов страницы. Это могут быть: шапка сайта, главное меню, футер, а также любые другие части, которые «вшиты» в шаблон страницы и имеют строго определённое место. Например, сайдбар будет иметь класс l-sidebar.
e- element. Любой выделенный элемент, повторяющийся на нескольких страницах. Это может быть кнопка, список тегов, социальные иконки, JS-плагины календарика, модальных окон, туллтипов и пр. Все они повторяются на нескольких страницах, на разных местах, в разных комбинациях. Например, e-submit кнопка отправки формы, или e-news-header скажет нам о том, что данный класс относится к заголовку новостей.
g- global. Такие префиксы даются «модифицирующим классам». То есть классам, которые навешиваются на любой объект на странице и модифицируют его. К таким классам можно отнести: g-clrfix, g-bold, g-inlineBlock и пр. Все они не являются самостоятельными элементами, а лишь изменяют свойства других объектов.
p- page. Данный префикс будет означать, что данный объект встречается только на одной странице (или группе однородных страниц одного раздела сайта) и не повторяется по всему сайту. Например, блок информации о пользователе и блок друзей встречаются только на странице профиля. Желательно такие классы хранить в отдельном CSS-файле.
j- javascript. Это единственный префикс, классы которого ни в коем случае нельзя стилизовать. Классы с данным префиксом используются только для доступа из JS: $loginForm.find(’.j-sendBtn’).
a- animation. Класс, который используется для анимации объекта. Например, a-fade-in говорит о том, что объект плавно появится на странице при помощи анимации. Или a-slide-up скажет нам о том, что объект появится снизу вверх ввиде анимации слайда.
Все префиксы легко запоминаются и не тормозят ход разработки. И пускай хотя бы не решают решение пространства имён в css полностью, но хотя бы частично заменяют его.
Todo
Вложенный цикл на LESS
- Репутация: 18
- Сниппеты: 5
- Ревизии: 0
Миксин, реализующий вложенный цикл
.loop(@n: 1, @m: @n, @k: @n * @m) when(@k > 0) {
.loop(@n, @m, @k - 1);
@i: `Math.floor((@{k} - 1) / @{m})`;
@j: @k - @i * @n - 1;
/*
@i бежит от 1 до @n,
@j бежит от 1 до @m,
@k бежит от 1 до @n * @m
например:
*/
&:nth-child(@{k}) {
top: 50px * @i;
left: 100px * @j;
}
}
/* использование: */
.loop(3,4);
- Репутация: 151
- Сниппеты: 19
- Ревизии: 0
Bootstrap 3 модальное окно по центру.
.modal {
text-align: center;
}
@media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}