Фотография из текста на чистом CSS и HTML
03.12.2017
#CSS #WEB #Полезные_сайты
Фотография из текста, да это вполне реально используя HTML теги и стили CSS. При чём пример кода описан достаточно просто и понятно. Друзья на просторах codepen.io мне встретился просто потрясающий код который отображает фотографию так, как буд-то она состоит из букв. Причем текст принимает цвет той части фотографии на которой он находится. Если же Вам необходимо…
https://techblog.sdstudio.top/fotografija-iz-teksta-na-chistom-css-i-html/
03.12.2017
#CSS #WEB #Полезные_сайты
Фотография из текста, да это вполне реально используя HTML теги и стили CSS. При чём пример кода описан достаточно просто и понятно. Друзья на просторах codepen.io мне встретился просто потрясающий код который отображает фотографию так, как буд-то она состоит из букв. Причем текст принимает цвет той части фотографии на которой он находится. Если же Вам необходимо…
https://techblog.sdstudio.top/fotografija-iz-teksta-na-chistom-css-i-html/
King Composer как сделать секцию во всю ширину (full width)
15.12.2017
#CSS #King_Composer #WordPress #Плагины
Здравствуйте друзья сегодня я хочу поделиться своим решением создания блоков во всю ширину, так-как достаточно часто при использовании сторонних тем ( не всегда поддерживающих плагин King Komposer) при применении свойства компонента ROW — fulll width блок просто смещается влево и не принимает положение во всю ширину страницы. Содержание: Добавление ID к секции Добавление стилей на…
https://techblog.sdstudio.top/king-composer-kak-sdelat-sekciju-vo-vsju-shirinu-full-width/
15.12.2017
#CSS #King_Composer #WordPress #Плагины
Здравствуйте друзья сегодня я хочу поделиться своим решением создания блоков во всю ширину, так-как достаточно часто при использовании сторонних тем ( не всегда поддерживающих плагин King Komposer) при применении свойства компонента ROW — fulll width блок просто смещается влево и не принимает положение во всю ширину страницы. Содержание: Добавление ID к секции Добавление стилей на…
https://techblog.sdstudio.top/king-composer-kak-sdelat-sekciju-vo-vsju-shirinu-full-width/
jQuery - центрирование эелемента на примере окна Popups
21.12.2017
#CSS #PopUps #WordPress #Плагины
Во время разработки очередного сайта возникла потребность отобразить попап окно в случае ошибки на котором будет изображён восклицательный знак, и соответствующий текст. Но с расположением попап окна по центру при реализации решения возникли определенные трудности, попап окно располагалось не по центру а слева. Погуглив в интернете я нашёл интересную функцию которая помогла мне не один…
https://techblog.sdstudio.top/jquery-centrirovanie-jeelementa-na-primere-okna-popups/
21.12.2017
#CSS #PopUps #WordPress #Плагины
Во время разработки очередного сайта возникла потребность отобразить попап окно в случае ошибки на котором будет изображён восклицательный знак, и соответствующий текст. Но с расположением попап окна по центру при реализации решения возникли определенные трудности, попап окно располагалось не по центру а слева. Погуглив в интернете я нашёл интересную функцию которая помогла мне не один…
https://techblog.sdstudio.top/jquery-centrirovanie-jeelementa-na-primere-okna-popups/
Адаптивная таблица за счет скрола
08.02.2018
#CSS #jQuery #WEB #WordPress #WordPress_CSS #WordPress_jQuery
Всем добра, не давно на работе пришлось переносить весьма старый сайт со всем его содержимым с Joomla 1,5 (одно слово Joomla у меня давно вызывает дрожжжжжж и нервный тик) на WordPress 4.9.3. Учитывая что весь контент наполнялся девушкой которая переносила таблицы на страницы старой версии сайта копипастом из Word документов, мне пришлось весьма нелегко с…
https://techblog.sdstudio.top/adaptivnaja-tablica-za-schet-skrola/
08.02.2018
#CSS #jQuery #WEB #WordPress #WordPress_CSS #WordPress_jQuery
Всем добра, не давно на работе пришлось переносить весьма старый сайт со всем его содержимым с Joomla 1,5 (одно слово Joomla у меня давно вызывает дрожжжжжж и нервный тик) на WordPress 4.9.3. Учитывая что весь контент наполнялся девушкой которая переносила таблицы на страницы старой версии сайта копипастом из Word документов, мне пришлось весьма нелегко с…
https://techblog.sdstudio.top/adaptivnaja-tablica-za-schet-skrola/
Стилизация скролл бара (Scroll Bar)
08.02.2018
#CSS #WEB #WordPress #WordPress_CSS #WordPress_HTML
При разработке лендингов стилизованный скролл бар это весьма красивое дополнение Вашего дизайна, особенно он красиво выглядит когда почти не заметен. В данной записи я приведу код (а позже и другие примеры кода) по стилизации скролл бара. Все что нужно это только добавить стили указанные в данной записи в Ваши, после этого вся магия красивого скролла…
https://techblog.sdstudio.top/stilizacija-skroll-bara-scroll-bar/
08.02.2018
#CSS #WEB #WordPress #WordPress_CSS #WordPress_HTML
При разработке лендингов стилизованный скролл бар это весьма красивое дополнение Вашего дизайна, особенно он красиво выглядит когда почти не заметен. В данной записи я приведу код (а позже и другие примеры кода) по стилизации скролл бара. Все что нужно это только добавить стили указанные в данной записи в Ваши, после этого вся магия красивого скролла…
https://techblog.sdstudio.top/stilizacija-skroll-bara-scroll-bar/
CreativeButtons - Стильные кнопки на все случаи жизни
09.02.2018
#CSS #WEB #WordPress_CSS #Полезные_сайты
Сегодня мы поговорим о вдохновении которое таится в кнопках ). Разговор будет о наборе кнопок который состоит из нескольких простых, творческих и тонких стилей и эффектов, которые по настоящему вдохновляют. Эффекты можно увидеть при наведении курсора на некоторые кнопки, и нажатии на другие. В основном используются CSS-переходы, а также анимация CSS, а для некоторых кнопок…
https://techblog.sdstudio.top/creativebuttons-stilnye-knopki-na-vse-sluchai-zhizni/
09.02.2018
#CSS #WEB #WordPress_CSS #Полезные_сайты
Сегодня мы поговорим о вдохновении которое таится в кнопках ). Разговор будет о наборе кнопок который состоит из нескольких простых, творческих и тонких стилей и эффектов, которые по настоящему вдохновляют. Эффекты можно увидеть при наведении курсора на некоторые кнопки, и нажатии на другие. В основном используются CSS-переходы, а также анимация CSS, а для некоторых кнопок…
https://techblog.sdstudio.top/creativebuttons-stilnye-knopki-na-vse-sluchai-zhizni/
CSS - фишки, полезности и хитрости
11.02.2018
#CSS #WEB #WordPress_CSS #WordPress_HTML
Здравствуйте друзья, в данной записи я собираю разного рода хитрости которые можно применять при верстке сайта то есть при работе с CSS. Коллекция полезного кода будет пополняться время от времени, приятного чтения и применения решений на практике. Содержимое: Выносим блоки CSS стилей в отдельные файлы Точечное применение nth-child для ПОТОМКОВ Бекграунд с изображением и оверлеем…
https://techblog.sdstudio.top/css-fishki-poleznosti-i-hitrosti/
11.02.2018
#CSS #WEB #WordPress_CSS #WordPress_HTML
Здравствуйте друзья, в данной записи я собираю разного рода хитрости которые можно применять при верстке сайта то есть при работе с CSS. Коллекция полезного кода будет пополняться время от времени, приятного чтения и применения решений на практике. Содержимое: Выносим блоки CSS стилей в отдельные файлы Точечное применение nth-child для ПОТОМКОВ Бекграунд с изображением и оверлеем…
https://techblog.sdstudio.top/css-fishki-poleznosti-i-hitrosti/
Bootstrap 3 - Создание мобильного меню для WordPress
11.02.2018
#CSS #HTML #JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_HTML #WordPress_jQuery #Все_для_разработки_шаблонов
Как организовать скрытие меню в бутерброд? На этот вопрос далеко не все веб мастера могут найти внятный вопрос, в данной записи я попытаюсь ответить на него приведя пример кода. В коде который используется в данном примере, мной использовались стили и скрипты Bootstrap, которые можно взять из CDN по ссылкам ниже. CDN Bootstrap LINK: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js…
https://techblog.sdstudio.top/bootstrap-3-sozdanie-mobilnogo-menju-dlja-wordpress/
11.02.2018
#CSS #HTML #JavaScript #jQuery #WEB #WordPress #WordPress_CSS #WordPress_HTML #WordPress_jQuery #Все_для_разработки_шаблонов
Как организовать скрытие меню в бутерброд? На этот вопрос далеко не все веб мастера могут найти внятный вопрос, в данной записи я попытаюсь ответить на него приведя пример кода. В коде который используется в данном примере, мной использовались стили и скрипты Bootstrap, которые можно взять из CDN по ссылкам ниже. CDN Bootstrap LINK: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js…
https://techblog.sdstudio.top/bootstrap-3-sozdanie-mobilnogo-menju-dlja-wordpress/
jQuery – Как загрузить кнопки AddToAny Share только по клику
04.12.2018
#CSS #Grav #jQuery #WEB #WordPress #Все_для_разработки_плагинов
jQuery – Как загрузить кнопки AddToAny Share только по клику Предлагаю не хитрый вариант отображения кнопок шаринга в социальные сети, только после того как был клик по кнопке. Не для кого не секрет что подгрузка ресурсов из внешних источников влияет не положительно на загрузку страницы. А когда речь идет о сервисах шаринга страниц дак и…
https://techblog.sdstudio.top/blog/jquery-kak-zagruzit-knopki-addtoany-share-tolko-po-cliku
04.12.2018
#CSS #Grav #jQuery #WEB #WordPress #Все_для_разработки_плагинов
jQuery – Как загрузить кнопки AddToAny Share только по клику Предлагаю не хитрый вариант отображения кнопок шаринга в социальные сети, только после того как был клик по кнопке. Не для кого не секрет что подгрузка ресурсов из внешних источников влияет не положительно на загрузку страницы. А когда речь идет о сервисах шаринга страниц дак и…
https://techblog.sdstudio.top/blog/jquery-kak-zagruzit-knopki-addtoany-share-tolko-po-cliku
Полностью адаптируемый видео бэкграунд. Включая примеры с JS и CSS (Full Background)
01.01.2019
#CodePen #CSS #HTML #JavaScript #jQuery #WEB
Видео бекграунд – полностью адаптивный Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе. И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы…
https://techblog.sdstudio.top/blog/web-polnostiu-adaptiruemyi-video-backgraund-s-js-i-css-full-background
01.01.2019
#CodePen #CSS #HTML #JavaScript #jQuery #WEB
Видео бекграунд – полностью адаптивный Если Вы хотите реализовать “человеческий” видео бекграунд, видео в котором будет всегда располагаться по центру и не иметь черных полос при масштабировании по вертикали (сверху и с низу) и по горизонтали (слова или справа). Видео бекграунд который находится в элементе. И так начнем! Когда мне потребовалось реализовать видео бекграунд чтобы…
https://techblog.sdstudio.top/blog/web-polnostiu-adaptiruemyi-video-backgraund-s-js-i-css-full-background
Как создать оптимизированное видео для фонового видео на сайт
05.12.2019
#CSS #HTML #WEB
Converter Point Converter Point Вашим любимым сайтом для оптимизации видео (для фонового использования на веб-сайте) должен стать Converter Point . Это онлайн-инструмент, который не требует, чтобы вы зарегистрировались, чтобы использовать его. Вам не нужно скачивать какую-то специальную программу. Просто загрузите видео и конвертируйте / сжимайте. Все довольно просто У сервиса есть несколько бесплатных опций, а…
https://techblog.sdstudio.top/blog/kak-sozdat-optimizirovannoe-video-dlya-fonovogo-video-na-sayt
05.12.2019
#CSS #HTML #WEB
Converter Point Converter Point Вашим любимым сайтом для оптимизации видео (для фонового использования на веб-сайте) должен стать Converter Point . Это онлайн-инструмент, который не требует, чтобы вы зарегистрировались, чтобы использовать его. Вам не нужно скачивать какую-то специальную программу. Просто загрузите видео и конвертируйте / сжимайте. Все довольно просто У сервиса есть несколько бесплатных опций, а…
https://techblog.sdstudio.top/blog/kak-sozdat-optimizirovannoe-video-dlya-fonovogo-video-na-sayt
Мистический inline-flex и что он делает - Stas Bagretsov - Medium
30.06.2020
#CSS #WEB #Примеры
Это очень редко используемое свойство в CSS Flexbox и про него в принципе мало чего подробного написано в интернете. Но это не беда. В этой статье вы узнаете о том что же такое display:inline-flex и какие преимущества он даёт при вёрстке, а также про его отличия от display: flex. Но в начале полезный перевод двух статей:…
https://techblog.sdstudio.top/misticheskii-inline-flex-i-chto-on-delaet-stas-bagretsov-medium/
30.06.2020
#CSS #WEB #Примеры
Это очень редко используемое свойство в CSS Flexbox и про него в принципе мало чего подробного написано в интернете. Но это не беда. В этой статье вы узнаете о том что же такое display:inline-flex и какие преимущества он даёт при вёрстке, а также про его отличия от display: flex. Но в начале полезный перевод двух статей:…
https://techblog.sdstudio.top/misticheskii-inline-flex-i-chto-on-delaet-stas-bagretsov-medium/
Анимация линий и замкнутых контуров SVG на чистом CSS (для WordPress и не только)
11.10.2020
#CSS #WEB
Во время работы над SVG Divider для Elementor разработчик написавший данную статью узнал, как вдохнуть жизнь в произведения своего искусства. Оценив некоторые библиотеки, он решил вручную анимировать SVG-строки, используя чистый CSS. Такой подход уменьшает зависимости и снижает влияние плагина на сайты клиентов. Между тем, результат приобретает безупречный вид и обеспечивает безупречную производительность. Далее переведенный текст статьи,…
https://techblog.sdstudio.top/animacija-linij-i-zamknutyh-konturov-svg-na-chistom-css-dlja-wordpress-i-ne-tolko/
11.10.2020
#CSS #WEB
Во время работы над SVG Divider для Elementor разработчик написавший данную статью узнал, как вдохнуть жизнь в произведения своего искусства. Оценив некоторые библиотеки, он решил вручную анимировать SVG-строки, используя чистый CSS. Такой подход уменьшает зависимости и снижает влияние плагина на сайты клиентов. Между тем, результат приобретает безупречный вид и обеспечивает безупречную производительность. Далее переведенный текст статьи,…
https://techblog.sdstudio.top/animacija-linij-i-zamknutyh-konturov-svg-na-chistom-css-dlja-wordpress-i-ne-tolko/
CSS Game: 8 игр для увлекательного изучения CSS
15.12.2020
#CSS #WEB
Должен признаться, мне сложно что-то запоминать. Особенно, если речь идет о CSS. Например, макет Flexbox. Свойство justify-contentгибкого контейнера может иметь более 12 различных значений, многие из которых можно комбинировать с ключевыми словами safe или unsafe. Чтобы прочитать полное руководство по flexbox по трюкам CSS, вам нужно прокрутить страницу с двумя столбцами высотой более 20 тыс.…
https://techblog.sdstudio.top/css-game-8-igr-dlja-uvlekatelnogo-izuchenija-css/
15.12.2020
#CSS #WEB
Должен признаться, мне сложно что-то запоминать. Особенно, если речь идет о CSS. Например, макет Flexbox. Свойство justify-contentгибкого контейнера может иметь более 12 различных значений, многие из которых можно комбинировать с ключевыми словами safe или unsafe. Чтобы прочитать полное руководство по flexbox по трюкам CSS, вам нужно прокрутить страницу с двумя столбцами высотой более 20 тыс.…
https://techblog.sdstudio.top/css-game-8-igr-dlja-uvlekatelnogo-izuchenija-css/
Пример отправка формы без с помощью WordPress REST API (2021)
11.04.2021
#Contact_Form_7 #CSS #WordPress #Плагины
Если вы создаете сайт WordPress, вам нужна веская причина не выбирать плагин форм WordPress. Они удобны и предлагают множество настроек, создание которых с нуля потребует огромных усилий. Они отображают HTML, проверяют данные, хранят отправленные материалы и обеспечивают интеграцию со сторонними сервисами. Но предположим, что мы планируем использовать WordPress как автономную CMS. В этом случае мы…
https://techblog.sdstudio.top/primer-otpravka-formy-bez-s-pomoshhju-wordpress-rest-api-2021/
11.04.2021
#Contact_Form_7 #CSS #WordPress #Плагины
Если вы создаете сайт WordPress, вам нужна веская причина не выбирать плагин форм WordPress. Они удобны и предлагают множество настроек, создание которых с нуля потребует огромных усилий. Они отображают HTML, проверяют данные, хранят отправленные материалы и обеспечивают интеграцию со сторонними сервисами. Но предположим, что мы планируем использовать WordPress как автономную CMS. В этом случае мы…
https://techblog.sdstudio.top/primer-otpravka-formy-bez-s-pomoshhju-wordpress-rest-api-2021/
Анимация объекта при прокрутке
13.04.2021
#CSS #JavaScript
В недавнем проекте я хотел включить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее. Это короткое руководство будет посвящено простому и короткому способу добавления анимированного скроллера. Если вы создаете небольшой веб-сайт или проект и…
https://techblog.sdstudio.top/animacija-obekta-pri-prokrutke/
13.04.2021
#CSS #JavaScript
В недавнем проекте я хотел включить изображение, которое поворачивается при прокрутке вверх или вниз. Проведя небольшое исследование, я обнаружил, что есть несколько способов сделать это: использовать только css, использовать javascript, использовать библиотеки и так далее. Это короткое руководство будет посвящено простому и короткому способу добавления анимированного скроллера. Если вы создаете небольшой веб-сайт или проект и…
https://techblog.sdstudio.top/animacija-obekta-pri-prokrutke/
Как использовать CSS box-shadow: 13 хитростей и примеров
21.04.2021
#CSS
Блестящие коробки выглядят скучно. Украсьте их с помощью эффекта CSS box-shadow! CSS – это язык, который разработчики используют для стилизации веб-страницы. Он контролирует, как элементы HTML отображаются на экране, на бумаге или на любом другом носителе. CSS предоставляет все возможности настройки для стилизации веб-страницы в соответствии с вашим собственным изображением. Вы можете изменить цвет фона…
https://techblog.sdstudio.top/kak-ispolzovat-css-box-shadow-13-hitrostej-i-primerov/
21.04.2021
#CSS
Блестящие коробки выглядят скучно. Украсьте их с помощью эффекта CSS box-shadow! CSS – это язык, который разработчики используют для стилизации веб-страницы. Он контролирует, как элементы HTML отображаются на экране, на бумаге или на любом другом носителе. CSS предоставляет все возможности настройки для стилизации веб-страницы в соответствии с вашим собственным изображением. Вы можете изменить цвет фона…
https://techblog.sdstudio.top/kak-ispolzovat-css-box-shadow-13-hitrostej-i-primerov/
Лучшие плагины WordPress для редактирования CSS Live Editor 2020
05.07.2021
#CSS #WordPress #WordPress_CSS #Плагины
Еще никогда не было так просто настроить дизайн вашего сайта. Используя плагин Live Editor WordPress CSS, теперь вы можете создать уникальный сайт, который соответствует вашим конкретным спецификациям дизайна и отражает имидж вашего бренда. До недавнего времени использование CSS для изменения внешнего вида вашего сайта в основном оставалось на усмотрение веб-дизайнеров. Однако теперь доступен ряд плагинов…
https://techblog.sdstudio.top/luchshie-plaginy-wordpress-dlja-redaktirovanija-css-live-editor-2020/
05.07.2021
#CSS #WordPress #WordPress_CSS #Плагины
Еще никогда не было так просто настроить дизайн вашего сайта. Используя плагин Live Editor WordPress CSS, теперь вы можете создать уникальный сайт, который соответствует вашим конкретным спецификациям дизайна и отражает имидж вашего бренда. До недавнего времени использование CSS для изменения внешнего вида вашего сайта в основном оставалось на усмотрение веб-дизайнеров. Однако теперь доступен ряд плагинов…
https://techblog.sdstudio.top/luchshie-plaginy-wordpress-dlja-redaktirovanija-css-live-editor-2020/