Delat
-
Posts
145 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by Delat
-
-
42 минуты назад, Igor Schnaider сказал:
Все размеры кнопки, в том числе
border-radius, можно привязать к размеру шрифта для пропорционального масштабированиявот это интересно, можете пояснить на примере? У меня объемлющий блок в котором находится кнопка, имеет ширину 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>
Должно получиться вот так, но получилось не так как хотелось бы:
-
9 минут назад, npofopr сказал:
А он хоть работает? htaccess
Да. А почему сомнения?
-
Сайт открывается с протоколом 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>
-
В 11.02.2017 в 14:17, VeniVidiVici сказал:
А вам обязательно использовать именно этот слайдер?
Нет. Слик пробовал установить, но были большие проблемы с версткой на всем шаблоне.
В 11.02.2017 в 14:17, VeniVidiVici сказал:Вот моё решение со слик слайдером, документацию нагуглите.
Спасибо, скрипт не корректно работает или я что-то делаю не правильно. При разрешении меньше 768px цветные блоки располагаются вертикально, как только начинаю передвигать окно на уменьшение, то образуются слайд. То есть слайд при загрузке с разрешением меньше 768px по умолчанию не загружается.
В 11.02.2017 в 14:17, VeniVidiVici сказал:Думал что будет просто, а оказалось не совсем). Отключаться он может а вот для обратного включения нужно использовать вспомогательную функцию.
Ммм, не совсем понятно, в каких случаях это пригодится? Если кто-то заходит на сайт со стандартного компьютера - то видит горизонтальный упорядоченный список, если с мобильного то слайдер.
-
26 минут назад, mrnobody сказал:
Попробовал, но не очень получилось ((
А я на вас надеялся(( Мне почему-то только два человека на форуме отвечают.
-
По видимому без вариантов, придется дорабатывать скрипт или отказаться от идеи. У разработчика (из справки) нет решений в таких случаях.
Вообще очень много возникает вопросов, где твои возможности упираются в границы твоих познаний и в таком случае необходима чья-то помощь по доработке скриптов, верстки и пр. И это только у меня, а есть ещё десятки тысяч. На месте администрации, я бы подумал как можно создать раздел на форуме, где за 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>
Есть вот такой блок с изображениями расположенными в горизонтальной плоскости. Как сделать чтобы при уменьшении окна, если не помещаются изображения, то они скрывались кроме первого активного изображения? И по бокам появлялись стрелочки для просмотра остальных.
-
3 часа назад, npofopr сказал:
Можно так http://mynameismatthieu.com/WOW/
Хорошие примеры. Но там нет примера как по событию, а именно при прокрутке страницы вниз, анимировать элементы.
-
На сайте 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.
Возможно скрипт необходимо чуть переделать в функцию, тогда будет работать?
-
14 минуты назад, mrnobody сказал:
Кликнув поочередно на html5 и css3, заливка осталась там и там, а это немного не то. Если кликнул на html5, то он стал активным и mark окрасился и наоборот, если кликнул на CSS3, то он окрасился, а заливка в html5 исчезла.
-
15 часов назад, mrnobody сказал:
Спасибо за пример конечно, но это не то. Кликнув на пустое пространство рядом с блоками li, фон в mark исчезает, а он должен остаться, на выбранном ранее элементе.
-
14 минуты назад, vladmih сказал:
:visited же для ссылки. Будет отрабатывать, когда по ссылке уже кликнули
Цвет должен меняться на голубой, только если кликаем поочередно с html на css. Именно -меняться, а не показываться как посещенные ссылки. С :visited нельзя восстановить цвет на обратный (светло-серый).
Возможные варианты решения:
- Через :target, но этот вариант отпадает т.к. используется уже в теге a атрибут id.
- Через :сhecked добавив input и label. В данном случае label будет имитировать цвет активного тега mark.
- Или с помощью псевдоэлемента.
Второй вариант сделать не получается, третий пока не знаю как сделать. Возможно все проще с помощью jquery или на чистом JS. Но вот как...
-
42 минуты назад, mrnobody сказал:
Добавьте к ховеру еще и фокус: https://jsfiddle.net/mrnobody/m7jy4bfe/2/
Этот вариант не подходит. Если кликнуть по любому другому соседнему элементу, то фокус слетает.
-
Как сделать чтобы после клика на тег a, в теге mark голубая заливка не исчезала?
-
Появились сложности ))
Подскажите, как исправить блок thead, он съезжает вниз при уменьшении экрана http://www.awesomescreenshot.com/image/2049476/53ea8a5f704048663ed7868a9389ee14
-
14 минуты назад, npofopr сказал:
По-моему вы ещё сами не разобрались, что хотите сделать.
Зачем вообще float?Зачем вам вообще таблица? Вы её вдоль и поперёк раскурочили.
Для tr поставьте inline-block вместо float: left;
Я сделал сначала таблицу для больших размеров экранов https://jsfiddle.net/Delat/c7nv7c1s/
потом возник вопрос как сделать для мобильных и планшетов. Собственно уперся в полосу прокрутки - она не срабатывала. Решил задать вопрос здесь, Вы помогли, спасибо! Как-то так
-
вот у меня не работает прокрутка https://jsfiddle.net/Delat/4b5wfk6z/1/
из-за float:left по всей видимости, как исправить?
Изменение placeholder при вводе текста в поле
in HTML Coding
Posted
Как делаются такие эффекты, когда при вводе текста placeholder не исчезает, а уменьшается и перемещается в угол. Вот пример с placeholder (слово "email") сместилось при вводе почтового ящика.