Tricks and solutions
Useful tricks and best practices solutions
370 topics in this forum
-
- 3 replies
- 2.5k views
Здравствуйте. Возможно ли при адаптации верстки каким то образом и с кода html убирать блоки, которые срываются при адаптации (display:none) в мобильных устройствах? Надеюсь нормально изложил вопрос (. Спасибо
Last reply by cfftrp, -
- 11 replies
- 3.6k views
Вопрос такой, из области дизайна и юзабилити. Вот если есть болшьой объём текста, то каким должны быть: - шрифт для максимальной читабельности; - размер шрифта; - расстояние между строками; - расстояние между абзацами; - цвет текста; - цвет фона; - ширина текста, ну, сколько символов в строчку. И если знаете ответ, то не говорите плиз в пунктах/кеглях/em/и.т.д, пиксели плиз:)
Last reply by Знаток, -
- 0 replies
- 1.8k views
Добрый день, Друзья! Я работаю в отеле и возникла необходимость сделать содержательную и удобное для пользования инструкцию по обслуживанию гостя в кафе отеля для сотрудников. Это три раздела, два из которых текст , а второй длинная таблица. Таблица это меню кафе с различными видами пояснений. Конечно можно было бы воспользоваться текст редактором, но Я подумал, что было бы удобнее сделать на HTML\CSS так как нужны такие элементы, как всплывающие фотографии блюд пояснения по наведению мыши возможность свернуть и развернуть некоторые стлобцы и строки Удобство работы (просмотра) с документом, как на стационарном компе , так и на мобильном устройс…
Last reply by Shank, -
- 1 reply
- 2k views
Ребята!Помогите пожалуйста,как мне сделать на странице поиска,слева от множества названий ссылок разных,чужих сайтов,рядом со своей ссылкой на мой сайт сделать свой логотип?????!!! За раннее благодарен Вам!
Last reply by npofopr, -
- 0 replies
- 2.1k views
Здравствуйте. Есть необходимость создать смену контента в зависимости от местоположения пользователя, а также передвинуть значок на карте. С контентом мне понятно, вроде ничего сложного. Но с картой ни разу не занималась, хочу спросить хорошее решение для этого. Использую Google Maps Api. Еще, есть ли возможность менять все вместе - и контент, и карту? CMS - Wordpress. http://wingchung.com.ua/
Last reply by kattiperk, -
- 5 replies
- 3.6k views
В общем, после очередного совокупления с этими зубчиками, я психанул и в свободные выходные написал генератор зубчиков из градиентов. Все сделано откровенно на коленке, но задачу свою выполняет. Возможно кому-то еще пригодится. Если кто еще не понял о чем речь, то суть сводится к получению вот такой штуки на градиентах: На github выкладывать, смысла особого не вижу, так что живет оно в моем паблике на jsfiddle. Ссылка на jsfiddle: http://jsfiddle.net/alexriz/nfaxengc/ Не много комментариев: .app-tooth { background-image: linear-gradient(rgba(51,70,135,1), rgba(51,70,135,1)), /* background */ linear-gradient(-45deg, rgba(51,70,135,1) 50%, …
Last reply by Get to heaven, -
- 0 replies
- 1.1k views
Собрал анимации свои, буду добавлять постепенно. Одна новая в день - минимум. Посмотрим что получится. Пишите, можем вместе поработать, буду рад) Можно всякие сниппеты собрать, может пригодится кому. http://rakapudl.github.io
Last reply by Rakapudl, -
- 20 replies
- 6.6k views
Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я…
Last reply by Great Rash, -
- 6 replies
- 6k views
А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый JS. Но не писать же "Hello World" в конце концов - не спортивно это как-то. Да и хочется создать что-то более-менее полезное для сообщества. Мы верстальщики, конечно ни разу не дизайнеры, но я стал за собой замечать, что частенько поучаю дизайнеров делать так а не эдак. И вот подумал как-то раз: дай-ка я для коллег замучу чо-нить полезное. Короче, давайте уже без лишних слов делать гриды, а? Значит так, первым делом нам надо заиметь Photoshop CC, потом нам нужно будет выполнить самую скучную часть работы, а именно прочитать …
Last reply by prodx, -
- 6 replies
- 5.6k views
Сейчас, когда на дворе почти 2015 год, стало модно делать всякие эффекты без использования JS. Обычно для переключения состояний элемента используются следующие псевдоклассы: :focus :checked :active Вот про первый я и хочу написать небольшую заметку. Знаете ли вы, что в HTML можно сделать любой элемент способным получать фокус? Для этого достаточно просто добавить атрибут tabindex к любому тегу. Есть правда один нюанс - tabindex отвечает за то, в каком порядке пользователь будет переключаться между полями формы (используя клавишу Tab). По умолчанию индексы расставляются браузером автоматически по мере появления контрола в коде, но мы можем изменить порядок переключения…
Last reply by psywalker, -
- 4 replies
- 7.3k views
Небольшое предисловие: В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали... Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD. Что нам понадобится: 1) Photoshop (думаю версия не имеет значения, например у меня CS5) 2) Inkscape (опенсорсный векторный редактор) 3) Любой текстовый редактор (у меня Sublime Text 2) 4) https://cloudconvert.org - са…
Last reply by Great Rash, -
- 8 replies
- 2.8k views
День добрый, господа форумчане. Для реализации своих проектов использую веб-сервер. По ряду причин являюсь противником применения всяких готовых сборок а-ля denwer, XAMP и им подобных, более того установки оных на своей основной машине. По этому использую связку ArchLinux+VirtualBox. Так сложилось, что Ubuntu мне не очень нравится и в качестве серверной OS использую именно ArchLinux. В целях удобства написал инструкцию по установке ArchLinux и всего необходимого для организации серверного окружения, дабы каждый раз не переворачивать тонны документаций. Получился пошаговый гайд, которым и хочу поделится с коллегами, возможно кому-то пригодится. В целом инструкция подхо…
Last reply by Veseloff, -
- 3 replies
- 5.6k views
Рассматривал я бутстрап и пришла в голову идея по стилизации селекта. HTML <span class="select"> <span class="select__wrap"> <select name="options"> <option value="option-1">Option 1</option> <option value="option-2">Option 2</option> <option value="option-3">Option 3</option> </select> </span></span>CSS .select,.select__wrap { display: inline-block;}.select,.select__wrap,.select__wrap select,.select__wrap option { font-size: 14px; line-height: 1em; vertical-align: bottom;}.select { border: red 3px dotted; border-radius: 5px;}.select__wrap { overflow: hidden;}.select_…
Last reply by Great Rash, -
- 9 replies
- 4.8k views
Подумалось тут в развитие старой темы. По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка. Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, н…
Last reply by SelenIT, -
- 0 replies
- 1.9k views
flow.pdf struct.event.arch.pdf
Last reply by s0rr0w, -
- 4 replies
- 3.4k views
Собственно, вот, написал плагин для поля ввода input[type=number] Опции плагина: wrap - класс для обвертки, так же есть возможность указания нескольких классов через пробел, по-умолчанию 'insWrap' btnU - класс кнопки инкремента (▲) значение поля, по-умолчанию 'ins-btnU' btnD - класс кнопки декремента (▼) значение поля, по-умолчанию 'ins-btnD' com - опция устанавливает по какому data-атрибуту будет осуществляться синхронизация нескольких полей, по-умолчанию 'com' tmpl - параметр позволяющий выбрать структуру html кода, по-умолчанию 'ab'. Возможный аббревиатуры: 'ab', 'ba', 'aa', 'bb', а так же вольный html-шаблон. 'ab' : устанавливает кнопки (▲) и (▼), после и перед (соотв…
Last reply by wwt, -
- 13 replies
- 4.5k views
Несколько лет никто (и я в том числе) не мог найти решение надоедливой проблемы, касаемой абсолютного позиционирования в ячейках таблицы, в браузере Firefox. Но, так случилось, что рывшись долгое время в поисках этого решения я на него всё таки наткнулся, и спешу поделиться им с вами в этой статье. Абсолютное позиционирование в ячейках таблицы, в Firefox Отдельное спасибо Илюхе (SelenIT). Пока писалась статья, мы с ним узнали много нового и интересного
Last reply by Yazon_Nile, -
- 39 replies
- 25.7k views
Вертикальное выравнивание. Часть 1. - для тех кто не в курсе. Только что пришла в голову еще одна идея, которая, на мой взгляд проще в реализации и опять же кроссбраузерна. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } .text { display: table; height: 100%; width: 100%; background: pink; } .inner { display: table-cell; text-align: center; vertical-align: middle; } </style> <!--[if lte IE 7]> <style type="…
Last reply by psywalker, -
- 30 replies
- 21.9k views
Сразу оговорюсь, что всё, что будет здесь описано, будет описано максимально упрощённо и многие вещи лично у меня настроены иначе (разбивка диска, nginx на фронте...), но главное донести суть, а там уже тонкости. Для начала нам понадобится домашний интернет с выделенным «белым» IP. Да, есть аозможность сделать и без этого, но я считаю этот вариант плохим и недостойным рассмотрения. Теперь нам нужен сервер. Понятно, что всё зависит от предполагаемой нагрузки, но я не вижу смысла держать дома нагруженные (а, значит, важные) проекты — для этого лучше подойдёт хороший ЦОД. Я выбрал себе девайс под названием DNS Porto — это такой типа неттоп российской сборки http://ekaterinbu…
Last reply by ApPosum, -
- 23 replies
- 10.9k views
В браузере IE9 при нажатии на F12 есть возможность выбрать режим браузера. Это IE7, IE8, IE9 с режимами совместимости. И это отображение теперь очень похоже на честное, в отличие от всякого рода эмуляций. Ура, товарищи!
Last reply by zSpx, -
- 24 replies
- 16k views
Так порой случается, что необходимо в PHP сформировать «человекопонятную» дату. То есть что-то в виде «4 февраля 2010 14:35:48». Представим, что у нас есть какие-то новости на сайте и у этих новостей должна быть дата, когда новость была добавлена. Новости хранятся в БД MySQL. Наиболее подходящий, как я раньше считал, для преобразования даты вариант хранениея: UNIX_TIMESTAMP в поле типа INT, так как, если бы это был DATETIME, то перед преобразованием даты при помощи функции PHP date(), нам бы приходилось делать strtotime(). Однажды оказалось, что следующая конструкция отнимает слишком много времени: $months=array('01'=>'января', '02'=>'февраля', '03'=>'марта', '0…
Last reply by Plaurnereag, -
- 12 replies
- 7.5k views
Недавно столкнулся с одной очень интересной (и не очевидной) проблемой. Мне по работе надо было сверстать сайт где дизайнером был предусмотрен огромный (шириной 2000px) бекграунд. Идея дизайнера такова - мы кладем этот бек на <body> и выравниваем по середине (background-position: 50% 0;), при ресайзе окна бекграунд будет все время оставаться на месте (по центру). "Ничего сложного", подумал я и наткнулся на неожиданное поведение "нормальных" браузеров. Минимальная ширина сайта была 950px и пока окно не становилось меньше все было отлично. Но, как только я делал окно меньше 950 пикселей бекграунд начинал смещаться относительно моего wrapper'а (и правильно делал, ведь …
Last reply by Great Rash, -
- 5 replies
- 4k views
На сайтах вы часто видели блок под статьей "Смотри также" или "Похожие ссылки", набор ссылок ведущих на связанные с данным материалом статьи. Мне известно два способа организации такого блока. Первый удобен для ссылок, когда их немного (несколько десятков) - делаем форму со списком всех материалов и галочками проставляем связи. Когда количество статей переваливает за тысячу такая форма теряет всякий смысл. Второй способ построен на терминах или ключевых словах, объединяющих разные материалы. Для каждого материала заводится текстовое поле, куда пишем некоторое слово (метку). Материалы имеющие одну и ту же метку считаются "похожими". Этот способ применяется в Друпале, кстат…
Last reply by Vlad, -
- 5 replies
- 6.4k views
Как вы знаете indexOf поддерживается не всеми браузерами. Но иногда возникает необходимость проверить существование элемента в массиве. Недавно наткнулся на очень элегантное решение проблемы: function oc(a) { var o = {}; for (var i = 0, l = a.length; i < l; i++) { o[a[i]] = ''; } return o; } alert('test' in oc(['te', 'st', 'test'])); // true alert(7 in oc([1, 2, 3, 4, 10, 20, 150, 7])); // true alert('test' in oc(['te', 'st', 'word', 'etst', test1])); // false alert(5 in oc([10, 9, 8, 7, 12, 1, 2, 3])); // false Источник
Last reply by Great Rash, -
- 7 replies
- 23.8k views
Давно (года полтора назад) натыкался на статью о том как создаются кнопки для сервисов гугля. Статью уже не найду, но те кнопки очень понравились и захотелось их повторить. Вот что вышло: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru"> <head> <title>An XHTML 1.0 Strict standard template</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } html { font-size: 100.1%; } body { margin: 10px; font: 62.5% Arial, Tah…
Last reply by mishka,
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть. -
Решение нашел. Заменил на Всем привет. Список выходит из дива. При этом, другие элементы в диве отображаются корректно. Не могу найти причину. Нужно чтобы список был под кнопкой ПЛЕЙ... -
Здравствуйте! Мы команда программистов с многолетним опытом разработки. Работая с нашей командой, Вы получаете порядок условий и развитие с обеих сторон: разработка проекта и продолжение сотрудничества на долгосрочной основе, так же специалисты всегда готовы предложить различные идеи и дополнения. Разрабатываем проекты любой сложности: скрипты для автоматизации рутины, боты, сайты, админ панели, ico, ldo, разработка криптовалюты, смарт контракты, приложения, игры. Ответственность, качество, соблюдение дедлайнов - это про нас! Наш контакт: https://t.me/MadFury (https://t.me/madfury) (TG) TG: https://t.me/2e7.io Сайт: https://code-r.io/
-