CSS фичи #6 ➤ Конверт с подарком

CSS фичи #6 ➤ Конверт с подарком | CSS Envelope

Рет қаралды 25,581

6 жыл бұрын

Китайцы дарят друг другу красные конверты на любые праздники. Внутри конверта - деньги. Такая традиция.
23 июня у меня день рождения и я решил сделать небольшую страничку, где можно написать мне поздравление и прикрепить небольшой донат. Скоро ссылка на этот сайт появится тут, а пока держите ссылку на исходный код: codepen.io/Aislam23/pen/ZRpydv
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Получить нужные материалы для любого веб-разработчика - taplink.cc/glo_web_academy
Получить консультацию куратора - bit.ly/2Ym5SqS
Связаться с автором: aislam23 telegram: t.me/aislam23
Мой блог: islamov_blog
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Мой канал в telegram "Лысый из браузера"
tele.click/baldfrombrowser
Еще у нас скоро стартует курс обучения. Напиши моему ассистенту:
vk.me/glo_academy
#Вебразработка #Верстка #АртемИсламов #GloAcademy #ВидеоУроки #Курсы #СозданиеСайтов #CssФичи #Css #Css3 #CssTransform #CssAnimation #АнимацияCss #УрокиПоCss #EnvelopeCss #Svg
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork

Пікірлер: 45

@hairy_nose 5 жыл бұрын

С музычкой классно) так аж оживает все

@yuriyskilskiy8440 6 жыл бұрын

Ура! Наконец-то новый выпуск фич )

@user-dk9yl4ct7b 4 жыл бұрын

Как всегда лайк за труды.

@RomanRachkov 6 жыл бұрын

Подписался ради фич)))) Очень интересные фишки, не думал что на столько просто все может быть)

@sigmaswarm 6 жыл бұрын

Классный урок. Классная подача информации. Лайк))

@andyvi3116 6 жыл бұрын

царский лайк. Больше css фич!

@user-wj2qg3wm5v 6 жыл бұрын

Как обычно, топовый видос!

@3dzbot 5 жыл бұрын

Спасибо!

@ilyakozel5472 6 жыл бұрын

Ееее ещё одна фича, смотреть правда перестал, некогда но знаю что тут полезняк ^_^ молодечик

@muradqurbanov2761 6 жыл бұрын

Супер))

@antonshamov6987 6 жыл бұрын

Хотелось бы увидеть уроки (css фичи) по видеофону, их нюансах. Так же их реагирование на мышку.

@httsTayWan 6 жыл бұрын

Годно!

@aibisalamandr4705 6 жыл бұрын

пожалуйста продолжай в таком же темпе

@NonToxicTV 6 жыл бұрын

Классная рубрика, классный урок! Тём, замути «CSS фичи» кастомных чек-боксов. Дефолтные довольно убогие. На практике с ними не все однозначно. Спрос на чекбоксы в формах сейчас возрастет, ведь сам Роскомнадзор взялся за дело =))

@DevStudioChannel 6 жыл бұрын

Cool!

@omsomol.j2501 3 жыл бұрын

11:37 transform-origin:bottom center; it was enough.😉

@pekarskiy_nikolai 6 жыл бұрын

Если поставить скорость открытия 0,5сек и скорость показа листа с текстом 1,5 сек. То мне кажется более лучше сморится. Но в любом случае "Лайк"

@kekcheburek13 6 жыл бұрын

Спасибо за фичу!) Хотелось бы узнать оптимальный вариант, как делать градиентный бордер)

@user-pw3ns1im8r 5 жыл бұрын

background: linear-gradient(#fff, #fff) padding-box, linear-gradient(red, blue) no-repeat border-box; border: 5px solid transparent; * * * У background первый градиент это будет фон блока, а второй как раз градиент рамки

@alexandermaymin2621 5 жыл бұрын

Интересные демонстрации возможностей css. Только такой вопрос. В предыдущем видео то же заметил. Почему когда нужно менять "состояние" всех элементов некоего контейнера (меню выезжает-кнопка меняется, конверт закрывается-"бумага" опускается в конверт) происходит "навешивание" классов на ВСЕ изменяющиеся элементы? Как следсвие - браузеру больше классов требуется обработать (на странице же не только конвертик или мению) и, главное, что меня раздражает при интеграции вёрстки - много вызовов javascript для добавления/удаления класса... Не лучше ли добавлять класс контейнеру? Для меню - active, для письма - close, а правила определить с учётом это класса у родителя.

@capy7773 5 жыл бұрын

Где найти этот конверт? На codepen нету изображений

@user-up1wk1ib8r 4 жыл бұрын

просто скопируй путь к картинкам с html в новую вкладку и скачай картинки

@agabekshamuratov4532 6 жыл бұрын

js фичи будут ?

@user-uq9ue3fe6k 6 жыл бұрын

Здравствуйте, я только начинаю учиться веб-программированию; я хотел бы спросить: обязательна ли кроссбраузерная вёрстка? Ещё хорошо было бы узнать, в чём она заключается.(Поверхностно, чем отличается от обычной вёрстки Html и css кодов). И вот ещё вопрос: возможно ли, и, если возможно, то сложно ли переделать код неадаптивный (сделанный под некроссбраузерную вёрстку) под адаптивный(под кроссбраузерную вёрстку)?

@lookarious2055 6 жыл бұрын

Алексей Цветков если ты спрашиваешь про адаптивность то отвечаю на второй вопрос, у меня был такой проект и я сперва постарался как бы "пропатчить" но не получилось, пришлось переделывать заново..

@leem0ne 6 жыл бұрын

адаптивность и кросбраузерность - это разные вещи. И то и другое сегодня обязательны. Пока не парься, со временем разберешься.

@Beast8833 6 жыл бұрын

всегда так делаю был недавно проект - инет магазин неадаптивный, я как глянул на говнокодоверстку, заказчику сказал, что проще переделать, чем еще кучу заплаток лепить, чем собсна и занялся

@user-dv8sl7xh7d 6 жыл бұрын

Кто за верстку макета ? Ставьте +++++++

@Cindorqw 6 жыл бұрын

могу еще +++++++

@Cindorqw 6 жыл бұрын

если тебе это так важно держи еще: +++++++

@user-bw5gg8mc8k 6 жыл бұрын

Можно было сделать конверт одной svg шкой и потом ее саму кодить на сайте

@markbeldy 5 жыл бұрын

Добрый вечер, а можно ли это реализовать без использования jquery¿

@3dzbot 5 жыл бұрын

через псевдоклассы, но строчек кода будет больше

@tigranvardanyan5044 6 жыл бұрын

Чувак ты делаешь реально крутые веши!!! с меня донат...... когда на работу устроюсь.

@Cindorqw 6 жыл бұрын

я тебе лям баксов подгоню, когда умру

@Shest_s_bugra Жыл бұрын

Codepen не может забрать картинки конверта.

@remeder4055 6 жыл бұрын

Закрывающаяся часть конверта называется "клапан"

@demvladvikt 6 жыл бұрын

Красиво, но лучше так не делать :)

@user-bombuser 6 жыл бұрын

Не зашёл конверт ибо из картинок

@serg9836 6 жыл бұрын

Отличные видео, покажи в следующих видосах как делать такие фичи kzfaq.info/get/bejne/aMCqmsmlqbqugpc.html лойс!)

@user-fo5rs6mt9f 6 жыл бұрын

Спасибо Артём!)) Вот что у меня получилось. (vk.com/videos412401630?z=video412401630_456239155%2Fpl_412401630_-2) Но вот беда, адрес почты я хотел поместить в .paper и обернуть ссылкой, на мой почтовый адрес. Всё получилось, но, при клике ничего не происходит, конверт просто закрывается.