css3 6 years ago

#Web Development

CSS Media Queries

Media queries to help designers & developers save some time searching. I'll try to continue adding as much media queries as possible.

iPad | portrait & landscape

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

iPad | portrait

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
/* STYLES GO HERE */
}

iPad | landscape

Code

@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
/* STYLES GO HERE */
}

iPhone X | portrait & landscape

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px)
  and (-webkit-device-pixel-ratio : 3) {
/* STYLES GO HERE */
}

iPhone X | portrait

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-device-pixel-ratio : 3)
  and (orientation : portrait) {
/* STYLES GO HERE */
}

iPhone X | landscape

Code

@media only screen 
  and (min-device-width : 375px) 
  and (max-device-width : 812px) 
  and (-webkit-device-pixel-ratio : 3)
  and (orientation : landscape) {
/* STYLES GO HERE */
}

Phones | portrait & landscape

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) {
/* STYLES GO HERE */
}

Phones | portrait

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation : portrait) {
/* STYLES GO HERE */
}

Phones | landscape

Code

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (orientation : landscape) {
/* STYLES GO HERE */
}

CSS3

Facebook

Twitter

A89FMtIkWKc css-just-changed-forever-7-new-features-you-dont-know CSS Just Changed Forever | 7 New Features You Don't Know CSS just got a brand new official logo. Let's take a look at some of the coolest new features available to HTML and CSS programmers in 2024.

# Web Development

CSS Just Changed Forever | 7 New Features You Don't Know

Fireship 1 month ago

oXSFwix7eR8 modern-css-for-sites-view-transitions-and-scroll-effects Modern CSS for Sites | View Transitions and Scroll Effects Join Adam Argyle as he walks you through how to spruce up an e-commerce page with container queries, popovers, view transitions, scroll driven animations, and much more!

# Web Development

Modern CSS for Sites | View Transitions and Scroll Effects

Google Chrome 1 month ago

kgV1tVYoQfs laravel-daily-quickly-view-sql-queries-in-laravel-with-dblisten Laravel Daily | Quickly View SQL Queries in Laravel with DB::listen A quick "trick" showed by Taylor Otwell on stage of Laracon US 2024.

# Web Development

Laravel Daily | Quickly View SQL Queries in Laravel with DB::listen

Laravel Daily 2 months ago

-mHx9MlXdIw new-in-chrome-125-css-anchor-positioning-and-more New in Chrome 125 | CSS anchor positioning and more Chrome 125 is rolling out now! With the CSS anchor positioning API, the Compute Pressure API, an expansion to the Storage Access API and there’s plenty more. Adriana Jara has all the details about what’s new for developers in Chrome 125.

# Web Development

New in Chrome 125 | CSS anchor positioning and more

Google Chrome 7 months ago

LGRogkgRrOs keeping-up-with-css-the-features-released-in-2023 Keeping up with CSS | The features released in 2023 People ask me how I keep up with CSS and all the new features coming out... instead of worrying about how I do it though, I figured I'd do a recap of all the new stuff so you don't have to go hunting for it!

# Web Development

Keeping up with CSS | The features released in 2023

Kevin Powell 1 year ago

zx8OZtKe6hA whats-new-in-google-chrome-118-the-at-scope-css-rule-is-here What's New in Google Chrome 118 | The @scope CSS rule is here This latest release includes 20 security fixes, more Material You visual redesign changes continue rolling out for desktop, includes a new toggle for showing images on tab hover preview cards, Encrypted Client Hello support, Enhanced Safe Browsing with deep scan and Safe Browsing protection is now improved.

# Web Development

What's New in Google Chrome 118 | The @scope CSS rule is here

Google Chrome 1 year ago

coidqLlYgoo new-in-chrome-117-css-for-smooth-entry-exit-animations New in Chrome 117 | CSS for Smooth Entry & Exit Animations Chrome 117 is rolling out now! With three new CSS features that make it easy to add smooth entry and exit animations, array grouping to compute higher order datasets, devtools makes local overrides easier and there’s plenty more.

# Web Development

New in Chrome 117 | CSS for Smooth Entry & Exit Animations

Google Chrome 1 year ago

B4Y9Ed4lLAI css-anchor-is-the-best-new-css-feature-since-flexbox CSS Anchor is The Best New CSS Feature Since Flexbox I cannot believe this is a feature coming to HTML/CSS.

# Web Development

CSS Anchor is The Best New CSS Feature Since Flexbox

Web Dev Simplified 1 year ago

JugpQeXCDKY hyperplexed-i-fired-a-css-cannon-at-a-famous-streamer Hyperplexed | I Fired a CSS Cannon at a Famous Streamer Watch as I show you how I fired a metaphorical CSS Cannon at Ludwig. By this I mean that I recreated an effect from his video using CSS.

# Web Development

Hyperplexed | I Fired a CSS Cannon at a Famous Streamer

Hyperplexed 1 year ago

YnWPeA6l5UE kevin-powell-getting-started-with-css-nesting Kevin Powell | Getting Started with CSS Nesting Nesting has landed in native CSS, and with Firefox gaining support for it, it is now supported in all the major browsers!

# Web Development

Kevin Powell | Getting Started with CSS Nesting

Kevin Powell 1 year ago

In0kjrozEPc new-in-laravel-1015-dump-sql-queries-with-parameters New in Laravel 10.15 | Dump SQL Queries With Parameters Exciting new 2-in-1 feature in the newest Laravel version!

# Web Development

New in Laravel 10.15 | Dump SQL Queries With Parameters

Laravel Daily 1 year ago

-pDPASqX97w how-to-create-this-unbelievable-css-scroll-animation How To Create This Unbelievable CSS Scroll Animation I was recently challenged on Twitter to recreate this amazing scroll based animation, and it was so fun.

# Web Development

How To Create This Unbelievable CSS Scroll Animation

Web Dev Simplified 1 year ago

srzsj3xtHMM lukas-top-10-css-features-you-should-know-and-use-in-2023 Lukas | Top 10 CSS Features You Should Know and Use in 2023 This video is about the Top 10 CSS Features you should know and use in 2023. I'm pretty sure that you don't know all of them - but you definitely should. They will help you to write better code.

# Web Development

Lukas | Top 10 CSS Features You Should Know and Use in 2023

CSS3 1 year ago

KGMe4OyXYEc new-in-chrome-112-css-nesting-rules-and-more New in Chrome 112 | CSS Nesting Rules and more! Chrome 112 is rolling out now!

# Web Development

New in Chrome 112 | CSS Nesting Rules and more!

Google Chrome 1 year ago

cscwgzz85Og new-in-chrome-111-view-transitions-api-css-color-level-4-and-more New in Chrome 111 | View transitions API and more! Chrome 111 is rolling out now! Enabling devs to create polished transitions in your single page app with the View Transitions API, bring your colors to the next level with support for CSS color level 4, Checkout the new tools in the style panel to make the most of the new color functionality and there’s plenty more.

# Web Development

New in Chrome 111 | View transitions API and more!

Google Chrome 1 year ago

p3_xN2Zp1TY useful-responsive-layouts-no-media-queries-required Useful & Responsive Layouts| No Media Queries required Here’s 5 quick responsive layouts that you can use, without any media queries! There’s nothing wrong with media queries, and we still need them sometimes, but these can be really handy in the right situation!

# Web Development

Useful & Responsive Layouts| No Media Queries required

Kevin Powell 1 year ago

lHZwlzOUOZ4 fireship-tailwind-css-is-the-worst Fireship | Tailwind CSS is the Worst… People have been debating the merits of Tailwind on twitter recently, so let's look at the pros and cons of this popular CSS library.

# Web Development

Fireship | Tailwind CSS is the Worst…

Fireship 1 year ago

B4_vT99pBaM new-in-chrome-109-opfs-on-android-new-css-properties New in Chrome 109 | OPFS on Android, new css properties Chrome 109 is rolling out now! The Origin Private File System API is now available for Android, there is a set of new properties in CSS, you can easily add math notations in your HTML with the support for MathML core, and there’s plenty more.

# Web Development

New in Chrome 109 | OPFS on Android, new css properties

Google Chrome 1 year ago

dldpud1PuL8 create-a-cool-color-fill-animation-with-css Create a Cool Color-Fill Animation with CSS Recently someone asked me about the animations on https://arena.net and it turned out they were using mask-image to pull off this cool effect. The animation is easy enough to create, though creating the mask itself is a bit time-consuming!

# Web Development

Create a Cool Color-Fill Animation with CSS

Kevin Powell 1 year ago

u0HTvSXNJmE can-chatgpt-write-decent-css Can ChatGPT write decent CSS? ChatGPT is all the rage these days, and people are even using it to write code for them, so I thought it'd be fun to see if it could write the CSS of a hero section of a website for me.

# Web Development

Can ChatGPT write decent CSS?

Kevin Powell 2 years ago

PkADl0HubMY award-winning-animation-with-only-20-lines-of-css Award Winning Animation With Only 20 Lines Of CSS? Watch as I show you how to recreate the sliding image track effect from https://camillemormal.com.

# Web Development

Award Winning Animation With Only 20 Lines Of CSS?

Hyperplexed 2 years ago

rrLAg7xNERA responsive-css-will-never-be-the-same Responsive CSS Will Never Be The Same I cannot believe this is finally here. It has been a few years since container queries were talked about and introduced and now they are finally available in nearly every browser.

# Web Development

Responsive CSS Will Never Be The Same

Web Dev Simplified 2 years ago

Xc6G3oV24yE top-10-css-one-liners-that-will-blow-your-mind Top 10 CSS One Liners That Will Blow Your Mind In today's episode, I will show you some of my favourite CSS properties out there. These cool css tips and tricks will help you upgrade your website to the next level. This list contains some CSS tricks and properties that you may not know of.

# Web Development

Top 10 CSS One Liners That Will Blow Your Mind

CSS3 2 years ago

CQuTF-bkOgc the-best-of-css-tailwind-vs-mui-vs-bootstrap-vs-chakra-vs The Best of CSS | Tailwind vs MUI vs Bootstrap vs Chakra vs... UI libraries are important! I think about them a lot and I hope this video helps you think about them too. TailwindCSS, MaterialUI, Chakra, Bootstrap, Radix, React-Aria, Master.co, and more...

# Web Development

The Best of CSS | Tailwind vs MUI vs Bootstrap vs Chakra vs...

CSS3 2 years ago

OGJvhpoE8b4 i-never-thought-this-would-be-possible-with-css I never thought this would be possible with CSS The :has() pseudo-class is here, and while it’s often called the parent selector, it can actually do a lot more than that!

# Web Development

I never thought this would be possible with CSS

Kevin Powell 2 years ago

qwdN1fJA_d8 new-in-chrome-105-container-queries-and-more New in Chrome 105 | Container Queries and More! Chrome 105 is rolling out now! Container queries and :has() are a match made in responsive heaven.

# Web Development

New in Chrome 105 | Container Queries and More!

Google Chrome 2 years ago

GIt-g0nkt8w new-in-chrome-104-region-capture-media-queries-transitions New in Chrome 104 | Region Capture, Transitions Chrome 104 is rolling out now! With region capture, you can now specify a crop area when using getDisplayMedia to capture the current tab. Media query syntax can be written using mathematical comparison operators. Shared Element Transitions start a new origin trial. And there's plenty more.

# Web Development

New in Chrome 104 | Region Capture, Transitions

Google Chrome 2 years ago

n4R2E7O-Ngo css-full-course-for-beginners-11-hours CSS Full Course for Beginners | 11 Hours This CSS Full Course for Beginners is an all-in-one beginner tutorial and complete course full of over 11 hours of CSS code and instruction to level up your web development skills.

# Web Development

CSS Full Course for Beginners | 11 Hours

Dave Gray 2 years ago

h3mzFraS8CA new-in-chrome-99-css-cascade-layers-show-picker-and-more New in Chrome 99 | CSS Cascade Layers, Show Picker, and more! Chrome 99 is rolling out now! CSS cascade layers gives you more control over your CSS, and helps to prevent style-specificity conflicts. The showPicker method allows you to programmatically show a browser picker for input elements like date, color, and datalist. Version 100 of Chrome *and* Firefox is just weeks away. And there’s plenty more!

# Web Development

New in Chrome 99 | CSS Cascade Layers, Show Picker, and more!

Google Chrome 2 years ago

sPbpElWAJ68 css-houdini-css-will-never-be-the-same CSS Houdini | CSS Will Never Be The Same CSS Houdini is a complete game changer for CSS. It allows you to do things that I never thought would be possible. You can write your own JavaScript to create custom CSS layout and background methods. You can also create your own custom CSS properties on top of many other features. Houdini will singlehandedly change CSS in a far greater way than even flexbox or grid could.

# Web Development

CSS Houdini | CSS Will Never Be The Same

Web Dev Simplified 2 years ago