Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгом «css»



dfatt
  • Репутация: 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');
}

Результат:

Valentin Sayik
  • Репутация: 37
  • Сниппеты: 5
  • Ревизии: 0

Мы хотим поделиться с вами вдохновляющими адаптивными прайс-таблицами сделанными на флексбоксе. Прайс-таблицы являются основной частью лендингов и сайтов на которых предлагают цифровые или другие платные услуги.

Продолжение »

Kosuha606
  • Репутация: 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);
            }
        }
    }
}

Продолжение »

Сниппет,  CSS

Button framework на stylus

Gravatar image
zoxon
  • Репутация: 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
	)
Gravatar image
Илья Понамарёв
  • Репутация: 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>  
Gravatar image
dkrnl
  • Репутация: 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-устройств
    }
}
jestonedev
  • Репутация: 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%;
}
Gravatar image
Quberik
  • Репутация: 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
Артем Леготин
  • Репутация: 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);
Gravatar image
Nepster
  • Репутация: 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;
}