#ссылка дня
#css #flex #flexbox #game
Соскучились по играм в CSS? Не всё же лягушек во FlexBoxFroggy.com (игра по флексбоксу) расставлять да морковку в CssGridGarden.com (игра по гридам) сажать.
Встречайте — http://www.flexboxdefense.com/
Tower Defense на flexbox!
P. S. вот только на телефонах не работает. Эх.
P. P. S. не забываем, что помимо игр бывают и человекопонятные шпаргалки вроде шпаргалки по гридам от Йоксель: https://t.me/htmlshit/402
#css #flex #flexbox #game
Соскучились по играм в CSS? Не всё же лягушек во FlexBoxFroggy.com (игра по флексбоксу) расставлять да морковку в CssGridGarden.com (игра по гридам) сажать.
Встречайте — http://www.flexboxdefense.com/
Tower Defense на flexbox!
P. S. вот только на телефонах не работает. Эх.
P. P. S. не забываем, что помимо игр бывают и человекопонятные шпаргалки вроде шпаргалки по гридам от Йоксель: https://t.me/htmlshit/402
Flexboxdefense
Flexbox Defense
Your job is to stop the incoming enemies from getting past
your defenses. Unlike other tower defense games, you must
position your towers using CSS!
your defenses. Unlike other tower defense games, you must
position your towers using CSS!
👍1
#ссылка дня
#css #flex #flexbox #tutorial
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
#css #flex #flexbox #tutorial
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
This media is not supported in your browser
VIEW IN TELEGRAM
#заметка дня
Давайте сегодня поговорим том, что иногда то, что выглядит как грид, на самом деле так же легко реализуется флексами. Ну мало ли.
Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.
Первая мысль – перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?
Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL
И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd
Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.
Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw
А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm
#css #flexbox #grid #flex
Давайте сегодня поговорим том, что иногда то, что выглядит как грид, на самом деле так же легко реализуется флексами. Ну мало ли.
Возьмём, например, чередующиеся колонки. Это очень часто встречающийся вопрос. В первой строке 3, во второй 2, в третьей опять 3 и так далее.
Первая мысль – перед нами грид. Но CSS Grid сам по себе не решает вопрос повторяющихся шаблонных структур, в любом случае приходится применять nth-child. Так какая тогда разница?
Давайте просто сделаем:
https://codepen.io/alinaki/pen/zYNVqvL
И то же самое на гридах:
https://codepen.io/alinaki/pen/NWdZNGd
Число строк совершенно одинаковое. Возможно, на гридах и элегантнее, решать вам.
Бонус, flexbox + gap:
https://codepen.io/alinaki/pen/mdWdLrw
А вот яркий пример того, чего на флексе точно не сделать без дополнительных обёрток:
https://codepen.io/alinaki/pen/QWdXNYm
#css #flexbox #grid #flex
#игра дня
Учить флексбокс? Но я хочу убивать зомби!
Ни слова больше!
https://flexboxzombies.com/p/flexbox-zombies
Раньше эта игра стоила 179 баксов. Сейчас бесплатно.
Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…
#css #flexbox #flex #game
Учить флексбокс? Но я хочу убивать зомби!
Ни слова больше!
https://flexboxzombies.com/p/flexbox-zombies
Раньше эта игра стоила 179 баксов. Сейчас бесплатно.
Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…
#css #flexbox #flex #game
Flexboxzombies
Flexbox Zombies
Master Flexbox layout: a game by geddski
#ссылка дня
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
#css #flex #flexbox #tutorial
Кажется, этому миру не хватает ещё немного обучающих диаграмм и статей по флексбокс-модели вёрстки. Вот подвезли ещё одну: https://semicolon.dev/tutorial/css/complete-css-flex-tutorial
Достаточно подробно и аккуратно расписано, но следует в очередной раз предупредить: это лишь шпаргалка. И как любая шпаргалка, она приносит больше пользы автору, нежели читателю.
Грань между хорошей шпаргалкой и сносной обучающей статьёй очень тонка, кто-то схватит с одной картинки, кому-то нужно лить воду (и это совсем не обязательно плохо).
С другой стороны, этих шпаргалок становится столько, что иной раз можно составить подобие полной картины.
Но лучше самим идти и пробовать все примеры.
#css #flex #flexbox #tutorial
👍3
#игра дня
Учить флексбокс? Но я хочу убивать зомби!
Ни слова больше!
https://flexboxzombies.com/p/flexbox-zombies
Раньше эта игра стоила 179 баксов. Сейчас бесплатно.
Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…
#css #flexbox #flex #game
Учить флексбокс? Но я хочу убивать зомби!
Ни слова больше!
https://flexboxzombies.com/p/flexbox-zombies
Раньше эта игра стоила 179 баксов. Сейчас бесплатно.
Забавно, конечно, что у них на сайте кнопка съехала. Мастера, так сказать, флексбокса…
#css #flexbox #flex #game
Flexboxzombies
Flexbox Zombies
Master Flexbox layout: a game by geddski
🔥11👍3😁3🤮1