karakym
-
Posts
25 -
Joined
-
Last visited
karakym's Achievements
Explorer (1/14)
-1
Reputation
-
А вот Алексей @alverspb с Habrahabr думает иначе.
-
karakym changed their profile photo -
От сюда начинается счастье) Помимо палитры еще, столько нового добавят в 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> А как вам новые градиенты? А увидев новые селекторы четвертого уровня, я вообще чуть не наложил в штаны! Теперь можно будет такие проверки мутить, что jQuery будет курить в стороне и ждать пока понадобится.
-
Анимация SVG с помощью CSS (несколько вопросов)
karakym replied to karakym's question in HTML Coding
Подскажи в какой формат экспортировать из корела в inkscape да бы получить лучшее качество!? -
Анимация SVG с помощью CSS (несколько вопросов)
karakym replied to karakym's question in HTML Coding
Дело в том, что текст уже переведен в кривые и разгруппирован, каждая буква как отдельный элемент. Но после экспорта в коде SVG только 3 элемента (кольца с текстом и без, а так же точки) -
Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
-
Изменение css свойств родителя onfocus:last-child
karakym replied to karakym's question in HTML Coding
Я так понимаю на css это не возможно? -
Стили для поля ввода (default, valid, invalid)
karakym replied to frontMan86's question in HTML Coding
Вам необходимо стилизировать все селекторы :invalid :valid :required -
Доброго времени суток, есть такая конструкция: #header nav ul li Нужно что бы при клике (:focus) на #header nav ul li:last-child у #header изменилось свойство width Есть какие идеи?
-
Спасибо помогло! Сначала не мог понять почему именно этому блоку нужно присвоить z-index. Почитал статьи которые подкинул товарищ Launder и понял что и почему!
-
Доброго времени суток, сегодня начался рабочий день и я продолжил свою работу по web проекту, но вот наткнулся на одну проблему. Есть модальное окно при открытии которого появляется форма отправки сообщений, и решил я на одной странице добавить картинкам (в постах) прозрачности (css opacity) добавил эффект плавного изменения прозрачности для hover этой картинки и все бы хорошо, но при открытии модального окна картинка вылазит на перед этого окна (как будто кто то дописал z-index:99999;) при чем если убрать свойство opacity у картинки то при открытии модального окна все отображается нормально! Что это может быть? http://test.sud-expertiza.dp.ua/available-properties.html - ссылка на страницу теста. По нажатию на Contact вылазит модальное окно и вы сможете увидеть эту неприятность. У меня Chrome на предмет других браузеров не смотрел.
-
Яяяяяд!!! Спасибо, работает!) не хочу подключать лишние библиотеки
-
Доброго времени суток, помогите собрать регулярное выражение вида: +38(063)937-99-92 +7(055)654-54-98 При чем: знаки "+" "()" "-" не обязательны, то есть можно так 3809379992! что бы в начале (+...) разрешало 2 символа (для Украины) и один (для России)
-
И еще маленький вопросик, как сделать что бы при нажатии на вкладку весь текст внутри <li> этой вкладки стал например жирный и поменял цвет, и когда выберу другую вкладку он возращался назад. Ну что бы было видно что текст относится к этой вкладке
-
Извиняюсь, все работает на ура! сам дурак, много ошибок в коде
-
Спасибо, извиняюсь. не так выразился, немного увлекся в свое дело) Почему то не работает, вот мой код. <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;}
