karakym
-
Posts
25 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by karakym
-
-
Помимо палитры еще, столько нового добавят в CSS четвертого уровня, вот например, цвета можно будет устанавливать во всех известных на сегодняшний день палитрах!
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <gray()> | <device-cmyk()> | <color-mod()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
Вы на это только посмотрите:
em { color: lime; } /* color keyword */ em { color: rgb(0 255 0); } /* RGB range 0-255 */ em { color: rgb(0% 100% 0%); } /* RGB range 0%-100% */
Ваще взрыв!!! Теперь цвета можно задавать в процентах!
А вот кто ни будь мечтал о цветовых профилях в CSS?
@color-profile = @color-profile <custom-ident> { <declaration-list> }
Цвета можно будет совмещать с кучей разнообразных функций:
color-mod() = color( [ <color> | <hue> ] <color-adjuster>* ) <color-adjuster> = [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) | [red( | green( | blue( | alpha( | a(] '*' <percentage> ) | rgb( ['+' | '-'] [<number> | <percentage>]{3} ) | rgb( ['+' | '-'] <hash-token> ) | rgb( '*' <percentage> ) | [hue( | h(] ['+' | '-' | '*']? <angle> ) | [saturation( | s(] ['+' | '-' | '*']? <percentage> ) | [lightness( | l(] ['+' | '-' | '*']? <percentage> ) | [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) | [blackness( | b(] ['+' | '-' | '*']? <percentage> ) | tint( <percentage> ) | shade( <percentage> ) | blend( <color> <percentage> [rgb | hsl | hwb]? ) | blenda( <color> <percentage> [rgb | hsl | hwb]? ) | contrast( <percentage>? )
Контрасты, смешивания, осветления, затемнения и т.д.
Прям редактор такой, который сможет хорошенько потомить и растровых и векторных перфекционистов!))Теперь большинство элементов смогут обращаться к другим элементам, вызвав их по id или классу или просто проверками.
Так например background получил кучу новых событий.
<style> #src { color: white; background: lime; width: 300px; height: 40px; position: relative; } #dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; } </style> <p id='src'>I’m an ordinary element!</p> <p id='dst'>I’m using the previous element as my background!</p>
А как вам новые градиенты?
Цитатаbackground: conic-gradient(#f06, gold); background: conic-gradient(at 50% 50%, #f06, gold); background: conic-gradient(from 0deg, #f06, gold); background: conic-gradient(from 0deg at center, #f06, gold); background: conic-gradient(#f06 0%, gold 100%); background: conic-gradient(#f06 0deg, gold 1turn); /*————————————————-*/ background: conic-gradient(white -50%, black 150%); background: conic-gradient(white -180deg, black 540deg); background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%)); /*————————————————-*/ background: radial-gradient(gray, transparent), conic-gradient(red, yellow, lime, aqua, blue, magenta, red); border-radius: 50%; width: 200px; height: 200px;
![conic2[1].png](<fileStore.core_Attachment>/monthly_2016_09/57d5e45a734fc_conic21.png.ec7e3e716d1c9b7a3735d9ec0f4a4444.png)
![conic1[1].png](<fileStore.core_Attachment>/monthly_2016_09/57d5e492578d5_conic11.png.6eb1ee28f0af27425066470266027e6e.png)
![conic5[1].png](<fileStore.core_Attachment>/monthly_2016_09/57d5e47fca05c_conic51.png.b826a13c8fac68d94d5cc18664743220.png)
А увидев новые селекторы четвертого уровня, я вообще чуть не наложил в штаны! Теперь можно будет такие проверки мутить, что jQuery будет курить в стороне и ждать пока понадобится.
-
1
-
-
у меня под рукой только inkscape он при разгруппировке сам разбивает на объекты, иллюстратора под рукой нет к сожалению
Подскажи в какой формат экспортировать из корела в inkscape да бы получить лучшее качество!?
-
перевести весь текст в кривые и разгруппировать?
Дело в том, что текст уже переведен в кривые и разгруппирован, каждая буква как отдельный элемент.
Но после экспорта в коде SVG только 3 элемента (кольца с текстом и без, а так же точки)
-
Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj
Есть несколько нюансов которые хотел бы узнать у знатоков.
1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ".
2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
-
на javaScript реализовать?
Я так понимаю на css это не возможно?
-
Вам необходимо стилизировать все селекторы
:invalid :valid :required -
Доброго времени суток, есть такая конструкция:
#header nav ul li
Нужно что бы при клике (:focus) на #header nav ul li:last-child у #header изменилось свойство width
Есть какие идеи? -
#header { position: fixed; top: 0; left: 0; width: 275px; height: 100%; color: #fff; background: #222629 url("../images/overlay.png"); box-shadow: inset -0.25em 0 0.25em 0 rgba(0, 0, 0, 0.1); text-align: right; z-index: 2;}Замените, нужно добавить блоку z-index: 2;
Спасибо помогло! Сначала не мог понять почему именно этому блоку нужно присвоить z-index.
Почитал статьи которые подкинул товарищ Launder и понял что и почему!
-
Доброго времени суток, сегодня начался рабочий день и я продолжил свою работу по web проекту, но вот наткнулся на одну проблему.
Есть модальное окно при открытии которого появляется форма отправки сообщений, и решил я на одной странице добавить картинкам (в постах) прозрачности (css opacity) добавил эффект плавного изменения прозрачности для hover этой картинки и все бы хорошо, но при открытии модального окна картинка вылазит на перед этого окна (как будто кто то дописал z-index:99999;) при чем если убрать свойство opacity у картинки то при открытии модального окна все отображается нормально!
Что это может быть?
http://test.sud-expertiza.dp.ua/available-properties.html - ссылка на страницу теста.
По нажатию на Contact вылазит модальное окно и вы сможете увидеть эту неприятность.
У меня Chrome на предмет других браузеров не смотрел. -
Честно упёр с хабра (убрав лишнее, чтоб только Россия и Украина попадала): ^((\+*\d{1,2})[\- ]?)?(\(?\d{3}\)?[\- ]?)?[\d\- ]{7,10}$
Яяяяяд!!! Спасибо, работает!)
а почему бы не использовать готовый плагин: http://plugins.jquery.com/jquery.inputmask/ ?
не хочу подключать лишние библиотеки
-
Доброго времени суток, помогите собрать регулярное выражение вида:
+38(063)937-99-92
+7(055)654-54-98При чем: знаки "+" "()" "-" не обязательны, то есть можно так 3809379992!
что бы в начале (+...) разрешало 2 символа (для Украины) и один (для России) -
И еще маленький вопросик, как сделать что бы при нажатии на вкладку весь текст внутри <li> этой вкладки стал например жирный и поменял цвет, и когда выберу другую вкладку он возращался назад.
Ну что бы было видно что текст относится к этой вкладке -
Извиняюсь, все работает на ура!
сам дурак, много ошибок в коде
-
http://jsfiddle.net/BloomerWD/Z9fMW/
P.S. В следующий раз, без говна пожалуйста и восклицательных знаков поменьше.
Спасибо, извиняюсь. не так выразился, немного увлекся в свое дело)
Почему то не работает, вот мой код.
<div class="panel" id="services"> <h2>Отзывы клиентов</h2> <div style="float: leftl"> <ul id="gallery_container"> <li onClick="view_tab('tab1')"><img src="src/alex.jpg" />Александр Скрыпников<br>г. Харьков</li> <li onClick="view_tab('tab2')"><img src="src/alex.jpg" />Александр Скрыпников<br>г. Харьков</li> <li onClick="view_tab('tab3')"><img src="src/alex.jpg" />Александр Скрыпников<br>г. Харьков</li> <div id="result"> <span id="tab" tab="tab1">Первая вкладка...<br>1...</span> <span id="tab" tab="tab2">Вторая вкладка...<br>2...</span> <span id="tab" tab="tab3">Третья вкладка...<br>3...</span> <span id="tab" tab="tab4">Третья вкладка...<br>4...</span> <span id="tab" tab="tab5">Третья вкладка...<br>5...</span> <span id="tab" tab="tab6">Третья вкладка...<br>6...</span> </div> <li onClick="view_tab('tab4')"><img src="src/alex.jpg" />Александр Скрыпников<br>г. Харьков</li> <li onClick="view_tab('tab5')"><img src="src/alex.jpg" />Александр Скрыпников<br>г. Харьков</li> <li onClick="view_tab('tab6')"><img src="src/add.jpg" />Добавь свой отзыв</li> </ul> </div> </div> <!-- end of services --><script type=""text/javascript">view_tab = function(tab) { var box = document.getElementById("box"), childs = box.getElementsByTagName("*"); for (var i=0; i < childs.length; i++) { if (childs[i].getAttribute("tab")){ childs[i].style.display = "none"; } if (childs[i].getAttribute("tab") == tab) { childs[i].style.display = "block"; } }}</script>вот цсс
/* gallery */#gallery_container { clear: both; margin: 0; padding: 0; } #gallery_container li { float: left; width: 190px; height: 160px; display: block; padding: 0; margin: 0 30px 30px 0; font-size: 11px; color: #fff; text-align: center;}#gallery_container .rmb { margin: 0; }#gallery_container li img { width: 170px; height: 100px; padding: 9px; border: 1px solid #2f2824; background: #623E3A; }#result { width: 170px; height: 310px; border: 1px solid #2f2824; background: #623E3A; float: right; }#result #tab { display: none;}#result #tab:first-child { display: block;} -
Если реализация говно,то сделайте свою реализацию с блекджеком и шл*хами. Вы бы прежде чем обсирать что либо научитесь внятно излагать свои мысли.
не не не!!! вы не поняли! я никого не обсираю, просто я имею в виду что я неправильно продумал реализацию, то есть мне нужно сделать по другому!
сначало думал что так подойдет и уже после того как попробывал пример понял что это говно! что у меня так ничего не выйдет!
Если бы я кого либо обсирал я бы цитировал и обращался к собеседнику по нику!
-
Или вообще нет!!! реализация говно! последний пост не нужен, я понял что мне это не подойдет!
В общем есть у меня 6 картинок 3 сверху и 3 снизу (как табличкой) и справа от них есть блок в высоту на две картинки
Я не умею управлять слоями в css но знаю что таковы есть!
Вобщем в диве нужно вывести 6 описаний для всех картинок и все их скрыть оставить только стиль блока (пустой)
При нажатии на одну картинку, выводит слой с ее описанием, на другую жмем, скрывает предыдущий и показывает для второй и т.д.
под описанием подразумеваю все что угодно, от текста, картинок до форм с полями. -
Хорошо, это работает, но как сделать если у меня несколько картинок с id="js"
я клацаю на одну, выводит ее тайтл когда клацаю на другую, тайтл больше не меняется, остается с первой картинки!
Как сделать что бы текст менялся в зависимости от тайтла картинки с id="js" и не важно где на странице находится эта картика -
Есть картинка, есть div.
При нажатии на картинку в этом div'e должен отобразится текст с тайтла картинки!
Помогите реализовать!
Заранее спасибо -
Нет не вутри!
Представьте есть 2 javascript'а в одном написано только "var back ='on';//Включить кнопку назад (on/off)?", а в другом "if(back==on)('<input type="button" onclick="java script:history.back()" value="Назад">')"
И эти js файлы выведены в в одном html файле!
Если вам не сложно сделайте пример в zip архиве и положите сюда!
-
Просто подскажи как сделать?
Вот у меня подключено 2 js (cfg.js back.js)
В файле cfg.js
var back ='on';//Включить кнопку назад (on/off)?
В файле back.js
if(back==on)('<input type="button" onclick="java script:history.back()" value="Назад">')
Только ничего не получается!
-
Вы не поняли если х равно true или другое значеие которое я поставлю!
А если не равно то не делать никаких действий!
-
Как на JS сделать типо такого!
{Если значение переменной "x" = "true" то делать "действие"}
Как правильно на JS такое написать?
-
Нет уж! жаль что я не помню на каком сайте я видел переделаный скрол бар!
Я всегда с оперы, с ИЕ я вообще не посещаю интэрнет!
-
А если нет такого свойства то раскажите как поменяять цвет границ и сам цвет скрол бара!
Для непонятливых: Скрол бар (ScrolBar) это полоска с права от окна, с помощью ей можно перемещатся ниже или више от окна, если ниже или выше есть инормация которую не видно!
А вот вам счастье от разработчиков CSS4
in Books
Posted
А вот Алексей @alverspb с Habrahabr думает иначе.