Jump to content

karakym

Newbie
  • Posts

    25
  • Joined

  • Last visited

karakym's Achievements

Explorer

Explorer (1/14)

-1

Reputation

  1. А вот Алексей @alverspb с Habrahabr думает иначе.
  2. От сюда начинается счастье) Помимо палитры еще, столько нового добавят в 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 будет курить в стороне и ждать пока понадобится.
  3. Подскажи в какой формат экспортировать из корела в inkscape да бы получить лучшее качество!?
  4. Дело в том, что текст уже переведен в кривые и разгруппирован, каждая буква как отдельный элемент. Но после экспорта в коде SVG только 3 элемента (кольца с текстом и без, а так же точки)
  5. Доброго времени суток, делаю прелоадер для сайта: http://codepen.io/karakym/pen/QNdvBj Есть несколько нюансов которые хотел бы узнать у знатоков. 1. На данный момент анимация простая, поворот нескольких элементов в противоположные стороны, так вот по окончанию загрузки сайта нужно остановить анимацию таким способом, что бы она доехала сначала до конца (все элементы прокрутились в исходные позиции) и лишь только тогда прелоадер можно плавно скрывать. Пробовал animation: paused; но это не совсем то что нужно, ведь анимация остановиться в последнем положении при котором загрузилась страница (то есть не докрутиться до изначального положения. Думал сделать способом убирания Infinite после загрузки страницы отловить когда элементы будут в исходных позициях после чего уже их можно скрывать, но с jQuery я пока что на "ВЫ". 2. С самого начала нужно сделать первую анимацию которая поочередно бы выполнилась для каждого элемента на примере этой анимации, но вот тут появляется новый вопрос по поводу SVG, изначально логотип был создан в CorelDRAW далее я сохраняю его в *.ai формат (Имхо иллюстратор лучше справляется с качеством svg при сохранении), так вот мне никак не удается сделать каждую букву на логотипе отдельным элементом (верней отдельными элементами делаю их в CorelDRAW, вот только когда уже экспортирую код SVG в HTML страницу то там отображается только основные элементы, как бы вывести каждую букву в отдельный path чтоле!? Да бы я смог сделать анимацию для каждой буквы отдельно!?
  6. Я так понимаю на css это не возможно?
  7. Вам необходимо стилизировать все селекторы :invalid :valid :required
  8. Доброго времени суток, есть такая конструкция: #header nav ul li Нужно что бы при клике (:focus) на #header nav ul li:last-child у #header изменилось свойство width Есть какие идеи?
  9. Спасибо помогло! Сначала не мог понять почему именно этому блоку нужно присвоить z-index. Почитал статьи которые подкинул товарищ Launder и понял что и почему!
  10. Доброго времени суток, сегодня начался рабочий день и я продолжил свою работу по web проекту, но вот наткнулся на одну проблему. Есть модальное окно при открытии которого появляется форма отправки сообщений, и решил я на одной странице добавить картинкам (в постах) прозрачности (css opacity) добавил эффект плавного изменения прозрачности для hover этой картинки и все бы хорошо, но при открытии модального окна картинка вылазит на перед этого окна (как будто кто то дописал z-index:99999;) при чем если убрать свойство opacity у картинки то при открытии модального окна все отображается нормально! Что это может быть? http://test.sud-expertiza.dp.ua/available-properties.html - ссылка на страницу теста. По нажатию на Contact вылазит модальное окно и вы сможете увидеть эту неприятность. У меня Chrome на предмет других браузеров не смотрел.
  11. Яяяяяд!!! Спасибо, работает!) не хочу подключать лишние библиотеки
  12. Доброго времени суток, помогите собрать регулярное выражение вида: +38(063)937-99-92 +7(055)654-54-98 При чем: знаки "+" "()" "-" не обязательны, то есть можно так 3809379992! что бы в начале (+...) разрешало 2 символа (для Украины) и один (для России)
  13. И еще маленький вопросик, как сделать что бы при нажатии на вкладку весь текст внутри <li> этой вкладки стал например жирный и поменял цвет, и когда выберу другую вкладку он возращался назад. Ну что бы было видно что текст относится к этой вкладке
  14. Извиняюсь, все работает на ура! сам дурак, много ошибок в коде
  15. Спасибо, извиняюсь. не так выразился, немного увлекся в свое дело) Почему то не работает, вот мой код. <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;}
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy