Delat

Как делаются такие эффекты, когда при вводе текста placeholder не исчезает, а уменьшается и перемещается в угол. Вот пример с placeholder (слово "email") сместилось при вводе почтового ящика.

вот это интересно, можете пояснить на примере? У меня объемлющий блок в котором находится кнопка, имеет ширину 375px. Как высчитать пропорции для border-radius в %?

Как сверстать блок с закруглёнными краями и градиентным border? На примере кнопки, я сверстал используя не стандартный подход, а есть ли более правильный семантически корректный подход в решении таких задач? Не нравится что кнопка вышла фиксированного размера. Много CSS-свойств. *, *::before, *::after { box-sizing: border-box; } body { background: #050B1F; } /* Верхний слой */ #button-continue { margin-top: 46px; width: 331px; height: 54px; border: 3px solid transparent; border-radius: 56px; background-color: rgba(11, 27, 55, 1); position:relative; cursor:pointer; } /* нижний слой (Градиент) */ #button-continue::after { content: ""; width:337px; height:60px; position:absolute; z-index:-5; top:-6px; left:-6px; border-radius: 56px; background-image: radial-gradient(circle closest-side at 40% -40px, rgba(255, 255, 255, 1), rgba(31, 119, 200, 1) 100px); } .button-continue__text { text-transform: uppercase; font-size: 0.875em; color: #99CEFF; font-weight: 400; } .button-continue__text::after { content: url('img/icon-continue.svg'); position: relative; top: 3px; left: 10px; } <button id="button-continue"> <span class="button-continue__text">Continue</span> </button> Должно получиться вот так, но получилось не так как хотелось бы:

Да. А почему сомнения?

Сайт открывается с протоколом http и https. Редирект .htaccess есть. В чём причина? Options +FollowSymLinks Options -Indexes RewriteEngine on RewriteCond %{HTTP_HOST} ^www.site.ru$ [NC] RewriteRule ^(.*)$ https://site.ru/$1 [L,R=301] #apache2ctl -M && sudo a2enmod expires && sudo service apache2 restart (to enable mod_expires on ubuntu) <IfModule mod_expires.c> ExpiresActive On ExpiresDefault "access 7 days" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/x-icon "access 1 year" ExpiresByType application/x-shockwave-flash "access 1 year" ExpiresByType application/javascript "access 1 year" ExpiresByType application/x-javascript "access 1 year" ExpiresByType text/css "access 1 year" ExpiresByType text/html "access 1 year" </IfModule> RewriteRule ^(.*)\.tpl$ [R=404] RewriteRule ^(.*)backups(.*)\.zip$ [R=404] RewriteCond $1 !^(phpinfo.php|index\.php|user_guide|uploads/.*|d35541edc391\.html|google2c3b3b2d324f8a50\.html|google33a3de9f6cc4a710\.html|google5ba5ce5ac24927ec\.html|favicon\.ico|article\.php|simple_html_dom\.php|docs|favicon\.png|captcha/.*|application/modules/.*/templates|application/modules/.*/assets/js|application/modules/.*/assets/css|application/modules/.*/assets/images|CHANGELOG.xml|templates|js|robots\.txt|movefiles\.php) RewriteRule ^(.*)$ /index.php/$1 [L] #################################### # or # RewriteRule ^(.+)$ index.php?$1 [L] # or # RewriteRule ^(.*)$ /index.php?/$1 [L,QSA] AddDefaultCharset utf-8 AddType 'text/html; charset=utf-8' .html .htm .shtml ## USER IP BANNING <Limit GET POST> order allow,deny deny from 85.198.123.230 ## deny from 80.80.108.77 ## deny from 80.80.98.158 allow from all </Limit>

Нет. Слик пробовал установить, но были большие проблемы с версткой на всем шаблоне. Спасибо, скрипт не корректно работает или я что-то делаю не правильно. При разрешении меньше 768px цветные блоки располагаются вертикально, как только начинаю передвигать окно на уменьшение, то образуются слайд. То есть слайд при загрузке с разрешением меньше 768px по умолчанию не загружается. Ммм, не совсем понятно, в каких случаях это пригодится? Если кто-то заходит на сайт со стандартного компьютера - то видит горизонтальный упорядоченный список, если с мобильного то слайдер.

А я на вас надеялся(( Мне почему-то только два человека на форуме отвечают.

По видимому без вариантов, придется дорабатывать скрипт или отказаться от идеи. У разработчика (из справки) нет решений в таких случаях. Вообще очень много возникает вопросов, где твои возможности упираются в границы твоих познаний и в таком случае необходима чья-то помощь по доработке скриптов, верстки и пр. И это только у меня, а есть ещё десятки тысяч. На месте администрации, я бы подумал как можно создать раздел на форуме, где за n- сумму люди могли помогать другим в решении их проблем в рамках существующих тем форума. Что-то по типу fiverr.com

https://jsfiddle.net/Delat/L9z4hhrx/15/ До 768px скрипт работает как слайдер и это правильно. Но вот не получается запретить с помощью стилей срабатывание стиля при разрешении 768px и выше. Может быть это в принципе нельзя сделать в стилях? Необходимо чтобы при разрешении свыше 768px (включительно), блоки <li> были списком расположенные по горизонтали.

Подскажите простой, а можно и не простой скрипт спойлера, где при клике и раскрытии черный плюс становится минусом.

<div class="imgPages col-es_12 clearfix"> <a href="assets/template/flexible/img/ballu/bravo.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo.jpg" alt="Ballu Bravo внутренний блок"> </a> <a href="assets/template/flexible/img/ballu/bravo-outdoor.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo-outdoor.jpg"> </a> <a href="assets/template/flexible/img/ballu/bravo-pult.jpg"> <img src="assets/template/flexible/img/ballu/small/bravo-pult.jpg" alt="Ballu Bravo ИК-пульт"> </a> </div> Есть вот такой блок с изображениями расположенными в горизонтальной плоскости. Как сделать чтобы при уменьшении окна, если не помещаются изображения, то они скрывались кроме первого активного изображения? И по бокам появлялись стрелочки для просмотра остальных.

Хорошие примеры. Но там нет примера как по событию, а именно при прокрутке страницы вниз, анимировать элементы.

На сайте https://pages.github.com/ по мере продвижения скролла вниз, видно как информационные блоки плавно появляются, как-будто выплывают. Как называются такие эффекты? Где можно подробно почитать, чтобы научиться их делать самостоятельно. А может быть есть уже готовые, которые не сложно кастомизировать?

Весьма искусно. Теперь работает) За ссылку спасибо! Эх, если бы я её раньше увидел. а где лучше выучить jQuery?

Нашел причину почему не работает в шаблоне. Если убрать этот код то ваш скрипт работает на сайте: jQuery(document).ready(function($) { $(".category-content").hide(); $(".category li:first a").addClass("active-link").show(); $(".category-content:first").show(); $(".category li a").click(function() { $(".category li a").removeClass("active-link a"); $(this).addClass("active-link"); $(".category-content").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); Подскажите пожалуйста, что изменить в вашем коде чтобы он заработал вместе с этим?

Да, это то что и надо. Большое спасибо! Единственное, почему-то в шаблоне не работает, наверное конфликт скриптов, а если тестировать на отдельных файлах .html, .js .css, то работает. А по какой книге вы изучили dom и js?

Ваш скрипт это чистый JS, как я понимаю. Пробовал разместить его в .html файле и в отдельном .js , проверял всё на отдельных тестовых файлах, но не работает функционал как в jsfiddle. Возможно скрипт необходимо чуть переделать в функцию, тогда будет работать?

Кликнув поочередно на html5 и css3, заливка осталась там и там, а это немного не то. Если кликнул на html5, то он стал активным и mark окрасился и наоборот, если кликнул на CSS3, то он окрасился, а заливка в html5 исчезла.

Спасибо за пример конечно, но это не то. Кликнув на пустое пространство рядом с блоками li, фон в mark исчезает, а он должен остаться, на выбранном ранее элементе.

Цвет должен меняться на голубой, только если кликаем поочередно с html на css. Именно -меняться, а не показываться как посещенные ссылки. С :visited нельзя восстановить цвет на обратный (светло-серый). Возможные варианты решения: Через :target, но этот вариант отпадает т.к. используется уже в теге a атрибут id. Через :сhecked добавив input и label. В данном случае label будет имитировать цвет активного тега mark. Или с помощью псевдоэлемента. Второй вариант сделать не получается, третий пока не знаю как сделать. Возможно все проще с помощью jquery или на чистом JS. Но вот как...

Этот вариант не подходит. Если кликнуть по любому другому соседнему элементу, то фокус слетает.

Как сделать чтобы после клика на тег a, в теге mark голубая заливка не исчезала? https://jsfiddle.net/Delat/m7jy4bfe/

Появились сложности )) Подскажите, как исправить блок thead, он съезжает вниз при уменьшении экрана http://www.awesomescreenshot.com/image/2049476/53ea8a5f704048663ed7868a9389ee14 https://jsfiddle.net/Delat/qe3dp1c2/

Я сделал сначала таблицу для больших размеров экранов https://jsfiddle.net/Delat/c7nv7c1s/ потом возник вопрос как сделать для мобильных и планшетов. Собственно уперся в полосу прокрутки - она не срабатывала. Решил задать вопрос здесь, Вы помогли, спасибо! Как-то так

вот у меня не работает прокрутка https://jsfiddle.net/Delat/4b5wfk6z/1/ из-за float:left по всей видимости, как исправить?