Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
В Битве Героев вы будете уничтожать монстров, отправляться на приключения со своим кланом. Вас множество локаций, монстров, снаряжения. Приведи своего героя к победе!

Битва Героев

Приключения, Ролевые, Кликер

Играть

Топ прошлой недели

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

CSS + Верстка

С этим тегом используют

HTML Программирование Javascript IT Web Frontend Дизайн Сайт Все
148 постов сначала свежее
15
CrazyCoding
CrazyCoding
3 года назад
Web-технологии

Простой календарь на JavaScript⁠⁠

Всем привет, новое видео от меня!


Создаем простой календарь на чистом JavaScript HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно использовать в качестве виджета на любом сайте. При необходимости календарь на чистом JS можно стилизовать под себя.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/WNjdMgY

GitHub: https://github.com/CrazyCoding21/CC-JavaScript-39-Simple-Cal...

Web Web-программирование HTML CSS Javascript Верстка Календарь Видео
9
14
Glog7
3 года назад

Хотя, большинство веб-студий такие сайты и лепят⁠⁠

Хотя, большинство веб-студий такие сайты и лепят Frontend, HTML, CSS, Верстка

Источник: vk.com/wall-119334888_45916

Показать полностью 1
Frontend HTML CSS Верстка
6
DELETED
3 года назад

Селектор потомков или куда класть стили?⁠⁠

Давайте представим, что у нас есть компонент card:

// Файл card.scss
.card {
 // стили
}

И компонент container:

// Файл container.scss
.container {
 // стили
}

Теперь нам нужно написать стили для card, который находится внутри container.


Тезис

Если мы пишем стили для компонента, то они должны находится в файле этого компонента.

В нашем случае это — card.


Пример

Воспользуемся селектором расширения SASS:

// Файл card.scss
.card {
 // стили
 %container & {
  // еще стили
 }
}
// Файл container.scss
.container {
 @extend %container;
 // стили
}

Здесь я для класса container задал одноименный extend.

А потом дописал стили в card.


Это скомпилируется примерно в такой css:

.card {
 // стили
}
.container {
 // стили
}
.container .card {
 // стили
}

@extend я использовал для того чтобы была возможность быстро переименовать класс, но можно и без него.


Альтернативный пример

// Файл card.scss
.card {
 // стили
 .container & {
  // еще стили
 }
}

Минус этого подхода в том, что если класс container изменится, то его придется править в нескольких местах.

А плюс — не требуется использовать extend или sass.


Антипример

Иногда можно увидеть как разработчик пишет так:

// Файл container.scss
.container {
 // стили
 .card {
  // еще стили
 }
}

Это приводит к тому, что стили для card находятся в разных местах. И это становится большой проблемой, когда таких мест становится несколько:

// Файл container.scss
.container {
 // стили
 .card {
  // еще стили
 }
}
// Файл main.scss
.main {
 // стили
 .card {
  // еще стили
 }
}
// Файл wrapper.scss
.wrapper {
 // стили
  .card {
  // еще стили
 }
}

Еще демо можно посмотреть в кодпене.

Показать полностью
[моё] Frontend CSS Web IT Верстка Стилизация Client Айтишники Программирование Кодирование Длиннопост Текст
3
30
CrazyCoding
CrazyCoding
4 года назад
Web-технологии

Эффект неонового свечения текста HTML CSS⁠⁠

Всем привет, новое видео от меня!


Создаем эффект неонового свечения на тексте на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Можно применять для создания оригинальных заголовков на любом сайте. Легко поменять цвет свечения, скорость движения линии, которая скрывает текст, размер текста и т.д. Полностью гибкое решение.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/VwpXxwj

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-6-Neon-Text-Eff...

Показать полностью 1
Web Web-программирование Верстка CSS HTML Неоновая подсветка Видео
11
64
Napuzdelu
Napuzdelu
4 года назад
IT-юмор

После курсов HTML / CSS у синих...⁠⁠

[моё] HTML CSS Верстка Курсы IT юмор Видео
9
14
CrazyCoding
CrazyCoding
4 года назад
Web-технологии

Эффект падающих звезд HTML CSS | Flying Stars Effect⁠⁠

Всем привет, новое видео от меня! Создаем эффект падения звезд на чистом HTML/CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Сам эффект можно адаптировать под себя увеличив количество элементов, изменив их внешний вид, цвет и прочее. Также можно легко настроить саму анимацию движения "звезд" как вам захочется.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/GRWEJNO

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-3-Flying-Stars-...

Web-программирование HTML CSS Верстка Программирование Код Звезды Звездопад Видео
3
66
BHD2R
BHD2R
4 года назад
Web-технологии

Как без пиратства и покупки платного ПО пользоваться макетами Adobe XD⁠⁠

Формат файла Adobe XD представляет из себя архив, который содержит описание структуры макеты в виде JSON структуры, графических растровых и векторных файлов использованных при создании макета.


Стандартный метод — открыть в программе Adobe XD — нужна программа купленная за деньги (подписка).

Использовать сервис-конвертор XD2SKETCH.COM — за деньги (подписка или платное разовое использование).

Программу-сервис Avocode — за деньги.
Кроме того, некоторые программы работают только в среде Mac OS (Sketch - только MAC OS или веб-приложение)

И тому подобное.


Чтобы открыть макет Adobe XD бесплатно, можно воспользоваться бесплатной программой-сервисом Photopea — в этом случае видны все параметры объектов макета и даже доступ к CSS значениям реализован удобнее чем в Photoshop. А вот реализация извлечения растровых объектов из макета, для внедрения в вёрстку, немного подкачала, на мой вкус.


Чтобы получить объекты из файла Adobe XD, достаточно открыть его как Zip-архив, например с помощью архиватора 7-Zip. В результате получим несколько папок с ресурсами JSON, XML, и папкой с растровыми объектами: «resources».


Содержащиеся там файлы будут без расширений, но это решается просто переименованием, с добавлением соответствующего расширения. Если есть сомнения в том, какое расширение необходимо, достаточно открыть файл в программе Notepad++ или в другом тактовом редакторе. У файлов формата PNG в первой же строчке будет «‰PNG». У SVG-файлов будет так же видна вся XML структура присущая SVG-файлам.


Итого, файл макета открыт в Photopea — данные CSS доступны для переноса. Папочка с графикой для вставки в вёрстку — готова.

Кроме того, из Photopea можно сохранить в PSD, который открывается некоторыми бесплатными просмотровщиками и редакторами.

Возможно, подход не оригинальный. Но уж чем богаты.

Вероятно есть и более простые методы.

Показать полностью
[моё] Верстка Веб-дизайн Adobe XD Png Json Xml 7-zip CSS Mac Os Текст
24
Партнёрский материал Реклама
specials
specials

Сколько нужно времени, чтобы уложить теплый пол?⁠⁠

Точно не скажем, но в нашем проекте с этим можно справиться буквально за минуту одной левой!

Попробовать

Ремонт Теплый пол Текст
DELETED
4 года назад

Войти в IT⁠⁠

Начну пожалуй с нулевой точки невозврата. Однажды звезды сложились в виде фразы, на которую я посылаю телефонных безопасников из сбера и настал тот период, когда я понял, что предыдущая работа не только перестала приносить мне удовольствие, но и скорее даже подбешивать начала. Дабы избежать регресса, депрессии, недовольства от несамореализованности и прочих атрибутов несчастной жизни я решил что пора менять русло своей жизненной реки. Ну а в какую сторону хотя бы двигаться? Мыслей не было и по совету приятеля я решил "вайти в ай ти", но т.к. я считал все это хогвартсом разросшимся до публичного дома без очка и профурсеток, конечно же я начал примерять на себя шкуру тестера. Не то чтобы это работа мечты или по своей натуре я люблю искать ошибки. Нет, совсем не так, я наоборот стараюсь не замечать мелкие ошибки в пользу целостной картины, во мне никогда не жил перфекционист, т.к. я считаю что распыляться на мелочь значит отказывать себе в дальнейшем развитии и облизывать свой конченный результат вместо того, чтобы стремиться к конечному. Но это совсем не значит, что я каким-либо образом умаляю значимость тестеров, просто это не мое.

Справедливости ради замечу свои потуги, я даже прочитал книжку Савина и сходил на одно собеседование, на котором мне разбили розовые очки.

Ну раз у этой двери получил пинка, пойду постучусь в другую - повинуясь своему азарту, подумал я. Что ж, обратившись к всезнайке-оракулу, сразу же закликал по первым ссылкам и меня сразу же встретили водопады от супершкол и гуру. Я ж не знал что так резко стало модно лезть в айти, я думал это я особенный и мне так повезло с первых же страниц гугла получить предложения от которых так сложно отказаться. Больше всех конечно меня зацепили курсы от академии хтмл, оформлены красиво, есть какой-то тренажер, который я даже проплатил на месяц, чтобы поиграться. Ну и само собой я нашел этот же курс на рутрекере. Тогда для меня это казалось все настолько сложным. с первых же занятий говорили о гите, оперировали незнакомыми мне понятиями и в целом я чувствовал себя не в своей тарелке. Это как заключенного отпустить на волю после 20 лет заточения. Вроде жизнь та же, но нет. Не та же. И нужно заново адаптироваться, а для того чтобы догнать тот самый поезд, на который ,как кажется уже давно опоздал и адаптация произошла успешно, крайне необходимо швырнуть на жертвенный алтарь то, что тянет назад и не дает совершить прыжок в свой локомотив. Но и тут есть нюанс, этот локомотив с легкостью отбросит прыгающего, если он не попадет в открытую дверь, я сам наблюдал такое не один раз, возможно напишу об этом позже. Вернусь к курсам. Я нихера не понимал ни с первого ни со второго раза, я смотрел эти курсы, пытался что-то повторять, но не мог даже предположить каким образом это научит меня писать хоть какие-то сайты. И это не проблема преподавателей, это просто я тупой.

Тупил я в эти курсы около 2 недель, параллельно верстал сам какие-то макеты, получалось не очень. Первую неделю каждый вечер ложился спать с пульсирующей головой, как будто хрустальные черепа показали серому флабберу в моей голове тайные знания. Воодушевившись очередным сверстанным макетом было принято решение искать работу. Перспектива самозанятости конечно привлекала, но я подсел на тайные знания. Конечно, я же считал что всем сейчас нужны верстальщики самоучки без опыта, но с амбициями загнать свой рейтинг в пищевой цепочке вайтишников, как можно выше. Написал никакое резюме на ххру, самонадеянно кидал отклики дополняя их тем что готов работать за еду, на все вакансии, которые мне казались подходящими, а их было ой как много и я начал ждать ответов. И мне отвечали. Правда почти все давали отказ, кто-то присылал тестовые задания, которые были мне явно не по зубам. А так же мне ответили мои, на тот момент будущие работодатели.

Показать полностью
[моё] IT Программирование Верстка HTML CSS Работа Саморазвитие Текст
26
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии