11
Необходимые координаты в path:
120 — радиус круга; если надо уменьшить, то уменьшать обе координаты
240 — высота блока
1000 — длина блока
При необходимости повернуть вырез, воспользуйтесь атрибутом transform="rotate()"
* {
margin: 0;
padding: 0;
}
.btn {
position: absolute;
width: 240px;
height: 240px;
border-radius: 50%;
...
ответ дан 17 янв '17 в 15:49
Sasha Omelchenko
12.1k44 золотых знака2424 серебряных знака5959 бронзовых знаков
10
Хоть и не в тему, но вот подобное на z-index, без javascript:
Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.
Новый, улучшенный вариант:
button:focus + button {z-index: 4}
button:nth-child(1) {z-index: 3}
button:nth-child(2) {z-index: 2}
button:nth-child(3) {z-index: 1}
button {
background: radial-...
ответ дан 28 окт '19 в 8:17
Stranger in the Q
54.9k99 золотых знаков7373 серебряных знака125125 бронзовых знаков
7
Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!))
Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку лейбела, и добавить еще три before-after, но так показалось нагляднее.
.num::before { content: "4"; }
.radius::before { content: "3"; }
.num::after { content: ...
ответ дан 28 окт '19 в 5:53
OPTIMUS PRIME
25.1k33 золотых знака1616 серебряных знаков4444 бронзовых знака
5
Собирать все это дело через грунт как раз очень удобно и не требует никаких лишних телодвижений. Делается автоматически с помощью grunt-watch.
Изучите вот этот очень простой мануал по настройке Grunt и вы поймете, что на самом деле все делается очень легко.
5
Синтаксис у фич в препроцессорах очень схож между собой, поэтому, изучив их в LESS, и перейдя потом на SASS, у вас не возникнет проблем со старыми знаниями. В этом плане изучать можно любые фреймворки в любом порядке.
По возможностям LESS и SASS близки. Twitter Bootstrap с четвертой версии официально перешел с LESS на SASS. Учитывая популярность бутстрапа, ...
ответ дан 20 авг '16 в 10:25
Виталий Емельянцев
5,72822 золотых знака88 серебряных знаков2929 бронзовых знаков
5
Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать .sass > .css?
Браузер может работать только с CSS и для этого sass компилируется в CSS
Т.е. получается, что .sass файлы являются что-то вроде 'базовой' библиотеки стилей, из которой потом 'лепится' уже готовый набор .css файлов?
sass это не "базовая библиотека" она ...
5
Добавление анимации
Берется соседний цвет градиента по точкам offset
values="violet;blue;violet"
Анимируется атрибут линейного градиента stop-color
<linearGradient id="linearGradient" x1="-36" x2="200" y1="148" y2="148" gradientUnits="userSpaceOnUse">
<stop style="stop-color:violet" offset="0">
<animate attributeName="stop-...
ответ дан 5 дек '18 в 15:44
Alexandr_TT
89.7k1919 золотых знаков8888 серебряных знаков258258 бронзовых знаков
5
на чистом js
без первоначального html (данные о картинках передаются массивом в функцию рендеринга слайдера
можно даже сделать, чтобы слайдера адаптировался под количество картинок в массиве, но это потом (по желанию ТС)
const picturesArr = [ // наш масисив данных о слайдах
"https://bipbap.ru/wp-content/uploads/2017/10/0_8eb56_842bba74_XL-640x400.jpg"...
5
Обычный border-radius и ни какого svg
.item {
width: 300px;
height: 300px;
border-radius: 49% 51% 50% 50% / 86% 32% 68% 14%;
background: url(https://yt3.ggpht.com/a/AATXAJwNLWXw1UnVIqUZu9Kj3qEMX3HkXv7ry4NQq5W7=s900-c-k-c0xffffffff-no-rj-mo);
background-size: cover;
animation: move 5s linear infinite;
}
@keyframes move {
0% {
border-...
ответ дан 26 мар в 14:09
MaximLensky
13.7k22 золотых знака1313 серебряных знаков5656 бронзовых знаков
4
Оставляешь в этом классе только основу, а размеры помещаешь в другой класс.
.round {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: silver; /* поменял цвет, чтобы их видно было */
}
.small {
width: 10px;
height: 10px;
}
.big {
width: 100px;
height: 100px;
}
...
ответ дан 3 июл '15 в 13:57
4
Введение
Представленный в этой части код не является ответом!
Безуспешно попытавшись найти ответ на свой вопрос (вероятно, плохо искал), я решил поступить так, как следовало сделать с самого начала - заглянуть в help node-модуля less. Выполнив команду, я получил исчерпывающий ответ -
-x, --compress Compresses output by removing some whitespaces....
4
Сам треугольник можно получить задавая различные цвета границам разных сторон элемента, а добавить к элементу - используя псевдоэлементы :before :after
.block {
background: green;
display: inline-block;
position: relative;
color: #fff;
width: 120px;
height: 20px;
margin: 10px;
}
.block::after {
content: ...
4
Проверь настройки файла .angular-cli.json, если в defaults установлено "styleExt": "scss", то при генерации комонента cli автоматически будет создавать *.scss файл и компилиться это все будет при билде приложения. Если же там стоит css, то используй команду ng set defaults.styleExt scss
вот чтиво https://github.com/angular/angular-cli/wiki/stories-css-...
4
В вашем примере я не увидел реализацию на svg а хотелось бы увидеть что не получилось
Так же в вашем примере есть clip-path который поддерживается но не везде, от пример реализации прямоугольника с закруглёнными углами и с градиентной заливкой stroke
<svg version="1.1" viewBox="0 0 237 113" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://...
ответ дан 5 дек '18 в 5:17
MaximLensky
13.7k22 золотых знака1313 серебряных знаков5656 бронзовых знаков
4
необходимо, чтобы при наведении эта рамка сложной формы вращалась на
360 градусов
Совсем простой вариант:
body{padding:0;overflow:hidden;}
.item {
position: relative; overflow: hidden; width: 180px; height: 180px;
border-radius: 120% 120% 170% 100% / 120% 120% 150% 150%;
transition: transform 2s;
}
.item::before {
content: ""; position: ...
ответ дан 27 мар в 13:53
Sevastopol'
26.5k1212 золотых знаков5757 серебряных знаков116116 бронзовых знаков
3
Не понял в чем именно была проблема, но теперь всё работает с данными настройками:
3
Потому что less - это не css. Тип по умолчанию - text/css.
В принципе, можно попробовать сделать
<link rel="stylesheet" type="text/less" ...
но, скорее всего, браузеры проигнорируют и это.
Надо компилировать less на сервере и подключать к странице скомпилированный css-файл.
ответ дан 14 мар '16 в 9:38
3
Есть сайт с темами для bootstrap
bootswatch.com там можно скачать темы
в виде файла bootstrap.min.css.
На упомянутом Вами ресурсе бесплатные темы отличаются только файлами стилей. Следовательно, Вы все делаете правильно.
Однако Bootstrap - это не только CSS фреймворк, немаловажную роль играют его компоненты. Думаю, Вас заинтересуют более комплексные темы.
3
В css появились переменные: https://caniuse.com/#feat=css-variables
.round {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: silver; /* поменял цвет, чтобы их видно было */
width: var(--width);
--height: var(--width);
height: var(--height);
}
<span class="round" ...
ответ дан 22 янв '18 в 9:17
3
Шторм компилирует sass/less c помощью т.н. file watchers - обработчиков, которые решают куда, чем и куда комплиировать. Необходимо открыть в проекте обработчик для этого файла, и поиграться с insert macro в поле output paths, я так понимаю, достаточно будет $FileParentDir$/$FileNameWithoutExtension$.css или даже ../$FileNameWithoutExtension$.css
3
На практике я часто использую два значения в адаптивной верстке когда нужно задать ширину 100% (именно процентов), а максимальную ширину например 600px. Смысл в том чтобы на маленьких экранах блок был на всю ширину а на больших ограничивался 600px дабы не быть растянутым так как высота фиксированная и на больших экранах без максимальной ширины блок исказится....
3
@mixin stitches-sprite($x: 0, $y: 0, $width: 0, $height: 0) {
background-position: $x $y;
width: $width;
height: $height;
}
.sprite {
background-image: url('spritesheet.png');
background-repeat: no-repeat;
display: block;
&.sprite-courier {
@include stitches-sprite(-5px, -5px, 79px, 43px);
}
&.sprite-dhl ...
3
Gradient Generator - colorzilla.com
CSS triangle generator - http://apps.eky.hk/css-triangle-generator/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.b-breadcrumbs {
text-align: center;
font-size: 0;
background: #271E19;
padding: 25px;
line-height: 1.15;
}
.b-breadcrumbs > li {
display: inline-block;
...
ответ дан 23 янв '17 в 5:35
soledar10
24.5k55 золотых знаков2727 серебряных знаков5959 бронзовых знаков
3
Правильный синтаксис:
height: ~"calc(100% - 51px)";
height: calc(~"100% - 51px");
Таким образом LESS не будет пытатся его вычислить.
3
-- Установите node.js
-- создайте папку в вашем проекте tools, перейдите в новую папку.
-- введите npm install gulp (в консоле, находясь в нужной папке)
вы получите файл package.json
куда пропишите примерно следующее:
{
"devDependencies": {
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.8",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
...
ответ дан 25 апр '17 в 20:52
silksofthesoul
1,24022 золотых знака1818 серебряных знаков2828 бронзовых знаков
3
SASS/LESS работают таким образом:
Вы пишете в их файлах некий код, который может быть как чистым css, так и кодом, соблюдающим правила написания именно для упомянутых технологий;
Некий watcher (либо вручную) смотрит за изменениями этих файлов, либо просто по некоему расписанию, компилирует написанный код в обычные файлы css;
Эти файлы сохраняются в те или ...
3
function addActive() {
document.querySelector('.test').classList.add('active');
}
function removeActive() {
document.querySelector('.test').classList.remove('active');
}
.hide {
display: none;
}
.test.active .hide {
display: block;
}
<button onclick="addActive()">Add active</button>
<button onclick="removeActive()">...
3
Решение даже без библиотеки slick.js. Лучше просматривать в полноэкранном режиме.
var carousel = $(".carousel"),
items = $(".item"),
currdeg = 0;
$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);
function rotate(e){
if(e.data.d=="n"){
currdeg = currdeg - 90;
}
if(e.data.d=="p"){
...
3
Должно быть &::after и &::before вместо того что сейчас
ответ дан 22 окт '20 в 19:00
Pavel Grishaev
4,17022 золотых знака33 серебряных знака1515 бронзовых знаков
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
less × 149css × 85
html × 26
sass × 22
javascript × 20
gulp × 15
css3 × 10
вёрстка × 9
webpack × 9
scss × 9
node.js × 5
flexbox × 5
phpstorm × 5
media-queries × 5
reactjs × 4
bootstrap × 4
svg × 4
webstorm × 4
адаптивная-верстка × 3
sublime-text-3 × 3
jquery × 2
linux × 2
wordpress × 2
angular × 2
frontend × 2