Tricks and solutions
Useful tricks and best practices solutions
370 topics in this forum
-
- 3 replies
- 2.7k views
Здравствуйте. Возможно ли при адаптации верстки каким то образом и с кода html убирать блоки, которые срываются при адаптации (display:none) в мобильных устройствах? Надеюсь нормально изложил вопрос (. Спасибо
Last reply by cfftrp, -
- 0 replies
- 2.2k views
Приветствую Всех! Около пары месяцев изучаю HTML и CSS. Очень увлекательное и интересное занятие! Пожалуй начну свое пребывание на форуме не с ветки типа: "Требуется помощь, наставник, учитель и прочее", а со этого. Буду рад любой критике и советам. Хорошая подборка "липких хэдеров" и не только для Вашего элитного лендинга: Пример http://www.virtuosoft.eu/code/bootstrap-autohidingnavbar/ скачать https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar Пример https://osvaldas.info/examples/auto-hide-sticky-header/ скачать https://github.com/istvan-ujjmeszaros/bootstrap-autohidingnavbar Пример http://tympanus.net/Development/HeaderEffects/ ска…
Last reply by yura777, -
- 3 replies
- 3k views
Проиндексировано Яндексом 2 миллиона страниц. Исключено из поиска 12 тысяч страниц. Сколько страниц должно быть в поиске? У этой задачи есть ответ и он не вяжется с арифметикой - в поиске всего 8 тысяч страниц. Почему?
Last reply by Vlad, -
- 0 replies
- 1.9k views
Добрый день, Друзья! Я работаю в отеле и возникла необходимость сделать содержательную и удобное для пользования инструкцию по обслуживанию гостя в кафе отеля для сотрудников. Это три раздела, два из которых текст , а второй длинная таблица. Таблица это меню кафе с различными видами пояснений. Конечно можно было бы воспользоваться текст редактором, но Я подумал, что было бы удобнее сделать на HTML\CSS так как нужны такие элементы, как всплывающие фотографии блюд пояснения по наведению мыши возможность свернуть и развернуть некоторые стлобцы и строки Удобство работы (просмотра) с документом, как на стационарном компе , так и на мобильном устройс…
Last reply by Shank, -
- 1 reply
- 2.1k views
Ребята!Помогите пожалуйста,как мне сделать на странице поиска,слева от множества названий ссылок разных,чужих сайтов,рядом со своей ссылкой на мой сайт сделать свой логотип?????!!! За раннее благодарен Вам!
Last reply by npofopr, -
- 0 replies
- 2.2k views
Здравствуйте. Есть необходимость создать смену контента в зависимости от местоположения пользователя, а также передвинуть значок на карте. С контентом мне понятно, вроде ничего сложного. Но с картой ни разу не занималась, хочу спросить хорошее решение для этого. Использую Google Maps Api. Еще, есть ли возможность менять все вместе - и контент, и карту? CMS - Wordpress. http://wingchung.com.ua/
Last reply by kattiperk, -
- 6 replies
- 6.2k views
А вот захотелось мне попробовать писать скрипты для фотошопа. Знал же ведь давно, что делать это можно, причём используя мой любимый JS. Но не писать же "Hello World" в конце концов - не спортивно это как-то. Да и хочется создать что-то более-менее полезное для сообщества. Мы верстальщики, конечно ни разу не дизайнеры, но я стал за собой замечать, что частенько поучаю дизайнеров делать так а не эдак. И вот подумал как-то раз: дай-ка я для коллег замучу чо-нить полезное. Короче, давайте уже без лишних слов делать гриды, а? Значит так, первым делом нам надо заиметь Photoshop CC, потом нам нужно будет выполнить самую скучную часть работы, а именно прочитать …
Last reply by prodx, -
- 20 replies
- 6.8k views
Привет тебе читатель, эт снова я, снова выдалась свободная минутка и я спешу поделиться с тобой интересным рецептом, который позволит создать у потенциального клиента так называемый вау-эффект. Не секрет, что сейчас очень популярны лендинг пейджи (лендинги, посадочные страницы, называйте как хотите). Нужны они для того, чтобы по-быстрому привлечь внимание у посетителя к вашему проекту. На какие только ухищрения не идут дизайнеры таких страниц: это и, ставший очень популярным в последнее время, параллакс-эффект, и красочные картинки из фотобанка, и сумасшедшего вида карусели изображений... И вот в последнее время редко-редко можно увидеть видео на фоне. Собственно видео я…
Last reply by Great Rash, -
- 5 replies
- 3.7k 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, -
- 59 replies
- 44.7k views
Народ, сколько можно мучатся со старыми глючными браузерами, тратить свои нервы и время. Надоело уже плясать под дудку мелко-мягких и их тупых ослов. Понятно что много еще юзеров пользуют их глючные браузеры и с этим приходится считаться, но загружают то они наш код и кто как ни мы веб-мастера можем сообщить юзеру , что он не прав ,что пользуется таким старьем, что уже давно есть более новые и современные браузеры, а тот отстой что у них, уже давно не справляется с современными сайтами и вообще дать ему понять то что он «лох» и отстал от жизни. Я думаю это должно сподвигнуть его на то, чтобы установить новый обозреватель. Да и для веб-мастера это еще способ сообщить юзе…
Last reply by inverno, -
- 0 replies
- 1.2k views
Собрал анимации свои, буду добавлять постепенно. Одна новая в день - минимум. Посмотрим что получится. Пишите, можем вместе поработать, буду рад) Можно всякие сниппеты собрать, может пригодится кому. http://rakapudl.github.io
Last reply by Rakapudl, -
- 6 replies
- 5.7k views
Сейчас, когда на дворе почти 2015 год, стало модно делать всякие эффекты без использования JS. Обычно для переключения состояний элемента используются следующие псевдоклассы: :focus :checked :active Вот про первый я и хочу написать небольшую заметку. Знаете ли вы, что в HTML можно сделать любой элемент способным получать фокус? Для этого достаточно просто добавить атрибут tabindex к любому тегу. Есть правда один нюанс - tabindex отвечает за то, в каком порядке пользователь будет переключаться между полями формы (используя клавишу Tab). По умолчанию индексы расставляются браузером автоматически по мере появления контрола в коде, но мы можем изменить порядок переключения…
Last reply by psywalker, -
- 39 replies
- 26.1k 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, -
- 4 replies
- 7.5k views
Небольшое предисловие: В компании, где я работаю, строго запрещено иметь нелицензионный софт, поэтому иногда приходится извращаться. Если вы ярый сторонник торрентов, то можете смело проходить мимо, ибо для вас всё сильно проще. А остальным я предлагаю решение, которое я гуглил месяцами, но все равно не нашел ничего похожего. Наткнулся я на него совершенно случайно. Итак погнали... Задача: сгенерировать иконочный шрифт из макета, который нам отдали в PSD. Что нам понадобится: 1) Photoshop (думаю версия не имеет значения, например у меня CS5) 2) Inkscape (опенсорсный векторный редактор) 3) Любой текстовый редактор (у меня Sublime Text 2) 4) https://cloudconvert.org - са…
Last reply by Great Rash, -
- 30 replies
- 22.4k views
Сразу оговорюсь, что всё, что будет здесь описано, будет описано максимально упрощённо и многие вещи лично у меня настроены иначе (разбивка диска, nginx на фронте...), но главное донести суть, а там уже тонкости. Для начала нам понадобится домашний интернет с выделенным «белым» IP. Да, есть аозможность сделать и без этого, но я считаю этот вариант плохим и недостойным рассмотрения. Теперь нам нужен сервер. Понятно, что всё зависит от предполагаемой нагрузки, но я не вижу смысла держать дома нагруженные (а, значит, важные) проекты — для этого лучше подойдёт хороший ЦОД. Я выбрал себе девайс под названием DNS Porto — это такой типа неттоп российской сборки http://ekaterinbu…
Last reply by ApPosum, -
- 8 replies
- 3k views
День добрый, господа форумчане. Для реализации своих проектов использую веб-сервер. По ряду причин являюсь противником применения всяких готовых сборок а-ля denwer, XAMP и им подобных, более того установки оных на своей основной машине. По этому использую связку ArchLinux+VirtualBox. Так сложилось, что Ubuntu мне не очень нравится и в качестве серверной OS использую именно ArchLinux. В целях удобства написал инструкцию по установке ArchLinux и всего необходимого для организации серверного окружения, дабы каждый раз не переворачивать тонны документаций. Получился пошаговый гайд, которым и хочу поделится с коллегами, возможно кому-то пригодится. В целом инструкция подхо…
Last reply by Veseloff, -
- 3 replies
- 5.8k 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
- 5k views
Подумалось тут в развитие старой темы. По сути, используя инлайн-блоки со «скукоженными» пробелами между ними, мы ведь пытаемся эмулировать «новые» флексбоксы (в т.ч. в многострочном режиме — flex-flow: row wrap) с flex: none. И у нас есть надежное средство «скукожить» пробелы везде, кроме вебкита (отриц. word-spacing с запасом), лекарство для старых вебкитов (display: table для контейнера) и... собственно флексбоксы в новых вебкитах (Хром-Канарейка и т.п.) . А также @supports, чтобы все остальные могли перейти со старых костылей на правильный флексбокс, как только смогут сделать это наверняка. Тем самым мы избавляемся от подгонки «магических» значений для двух похожих, н…
Last reply by SelenIT, -
хак для Opera IE FF 1 2
by Emm- 28 replies
- 32.5k views
Нужно применить css свойство только для Оперы, может есть какой-то специальный подход?
Last reply by wwt, -
- 4 replies
- 3.5k 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, -
движки или ? 1 2 3
by bald- 50 replies
- 26.3k views
доброго времени суток. —————————- недавно я пролистывал подобную тему на форуме но как-то не придал этому значения. а теперь мне стало интересно мнение людей опытных. 1)саит обязательно должен иметь движок(если да то посоветуйте, что хорошее и что нет) 2)или есть другие средства заменяющие движок я просто вообще не в курсе всей этой штуки.
Last reply by WINzero, -
- 12 replies
- 11k views
Я недавно закинул сай на Narod.ru, что мне зделать чтобы его можно было находить в посковиках?, подскажите пожалуйста????
Last reply by vazonov11, -
- 0 replies
- 2k views
flow.pdf struct.event.arch.pdf
Last reply by s0rr0w, -
- 23 replies
- 14.5k views
Здравствуйте, уважаемые форумчане! Увидел такую запись <meta name="keywords" content=""> Что происходит, если, как в данном случае, не прописать ключевые слова? Сайт, кстати, занимает лидирующую позицию в выдаче ПС.
Last reply by antmike, -
- 30 replies
- 29.6k views
Здравствуйте, помогите плиз: добавил себе javascript на страничку, и все русские символы заменились на мелкие прямоугольники (типа не поддерживаются) я думал, дело в этом: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> изменил все EN на RU, но не помогает.. в чем может быть дело??
Last reply by DarkPrelat,
-
Обсуждения
-
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ -
Актуальные контакты: Telegram: @Nikker_web E-Mail: tarasevich.email@gmail.com Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ Портфолио https://www.behance.net/d4d4186e
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок 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
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-