6/4/21: Checkout CSS style guides, a set of standards and rules on how to use and write CSS code. It often contains global branding definitions like colors and typography and a set of reusable components for building a more consistent and maintainable project.
Use Repeat helper function: Instead of typing one FR-12 times for a 12 column grid you can use a row-template-column: repeat (12, 1fr). Combining with minmax function Make sure they’re not too skinny but now overflows on the horizontal axis, Repeat(12, minmax(240px, 1fr)). fix this by creating an implicit grid which lets the algorithm figure out columns and rows. You can accomplish this by setting grid template columns to repeat(auto-fit, minmax(240px, 1fr). There is also an auto-fill option but this creates unnecessary empty columns.
Gaps: You can literally just use gap: 1rem; You also have grid-column-gap and grid-row-gap and to eliminate both of those you can use grid-gap.
Fixed heights: You can set grid-auto- rows to 100 pixels and they’ll all be the same size. When you do this though and content needs more space it will not be restricted to the div. To prevent this you can use grid – auto-rows: minmax(100px, auto). This will now stretch out to fill content if it needs more space. It will only be for the row that div lives in. When using an implicit grid you may want to also use grid auto rows 240 pixels.
Justifying items: justify-items: start; or center; or end; or stretch; (the default). Justifying items is essentially horizontal positioning. You can also do justify – self for an individual item not instead of affecting all items.
Aligning items: align-items: start, center; end; stretch (default); Aligning items is essentially vertical positioning. You can also do align-self If you want to affect an individual item.
Using spans: Make certain divs different sizes. By setting the grid row property and to span 2 It will now span across two rows from it’s starting position. You can also use a / to calculate its ending point or just use /auto. grid-row: 1/4; means start at horizontal line one and end at horizontal line four. Span 2/ Auto means start wherever and span two row lines an automatically end wherever. You may need to combo with media queries. This is needed if sometimes your divs are too narrow on smaller screen sizes when trying to expand two columns on smaller screens. For example, @ media screen and (min-width:600px) {grid-row: span 2 / auto;}.
Using Lines: You’re essentially giving numbers to lines that separate the boxes. The border left of column A is line 1 and moving to the right the lines increase in number. The border top of row A Is the horizontal line one. You can say you want a particular box to go from line one to line three using the span property. Grid-column and grid-row. For example to make box one consume three columns and rows you would set grid-column: 1/3; grid-row: 1/3; This property is where you start to separate yourself from flexbox. If You take a box three and have it start online too You may have box four now show before box three.
Overlapping elements: another way grid separates itself from flexbox is the ability to overlap. This eliminates the need for margin negatives which is crap.
Examples of grid in practice: Think of the windows a start screen with the tiles that flip on hover.
Grid replaces bootstrap: You can easily set up a 12 column grid and do so with a significantly less code than you did with bootstrap.
Fireship example: The advantages of using grid are that it has a smaller CSS payload and there’s less code complexity. There’s also very powerful and you can do designs that you would typically only see in a magazine. Three examples. 1.) Infinite set of responsive columns to display card 2.) Mosaic photo gallery and 3.) Intro animation, each item comes in clockwise until it gets to the center.
Grid-template-areas: This is where you set an explicit grid where you manually define the columns and rows. In the fireship example he set grid template areas to a matrix where the first row was ‘a b c d’ The second row was ‘ l emoji emoji e’ the third row was ‘k emoji emoji f’and the fourth row was’j I h g’. He then said grid template rose to repeat for, 25%. Then set grid template columns to 240 px auto auto 240px; He then targets grid – area: a; check out the video at 9 and 1/2 minutes in to see the animation.
Dev tools: firefox dev tools has a good layout area that allows you to see the grid with axis lines.
csszengarden.com is a testament to the power of CSS, showing the same content in entirely different ways just by changing the style-sheet. Alligator.io is another site that loads different modes (Light, Dark, Solarized, Dark). I wonder how they load the style-sheets on ZenGarden with a touch of the button? Fireship has a video on YouTube.
Been spending some time on the WPBeginner.com site and I will say like I really like their simple styling It’s starting to look a little outdated if it’s so simple but especially on full screen like they keep the content box pretty narrow probably like 700-800 pixels and I really like that idea.
Learn to build an SVG animation with CSS. YouTube video by DevEd here
Undraw.co to get usable svg quickly. Author highly recommends using Figma to export the things the way you want and make simple edits. Simple shapes as much as possible. Group where possible.
Each page as its own animation
I’ve been thinking a lot about having a deck of slides (what’s bosses uses HTML5 for slides and I forget what Scott’s of the uses but they both use coded slides in their presentations) that plays automatically and transitions from page to page automatically with each page being its own animation. The automatic page to page transition seems a little bit more difficult. A self-navigated through a series of links really just relies on good quality nav menus. You can spice things up by adding some smooth paste transitions that you rarely see on websites. Web Dev Simplified had a good video (here) on how to build them. He uses a library called Swup (boo not more vanilla). Queen Max and timeline Max was used in a different video by DevEd called “page animations with JavaScript tutorial.”
I want to be able to do some basic vector illustrations and be able to do it quickly and I also want to be able to do CSS animations and this is a good way to stand out from the hurt cuz it’s a good way to make your website just look different. A few of course you can buy this stuff but I already know how to do these things I just need to do it on like a set schedule and I put in some time.
I was thinking I should just create like a container like a standard container that I always use within a WordPress site and I try to recreate animations I see in some of my favorite infographic videos in CSS. I will say like if I can just use After Effects and premiere like Jeff Delaney and just his concept I mind as well just do that. I really don’t want to be a YouTuber though maybe it’s not that bad if I’m not on camera. I guess that’s the idea though too is you become like such an expert you put your stuff out there for other people to benefit from.
Browser presentation search on YouTube was a dead end
It’s got to be some simple combination of HTML CSS JavaScript maybe some JSON or database to make it super simple. I bet checking out like a note card app JavaScript project would show some pointers.
Grid Docs | Flex Docs | See Also: Sass, LESS
Tweak an image and make cool non-square shape effects you typically do not see in the browser with clip-path.
clip-path: polygon();
There’s a little icon in the Firefox dev tools (above polygon property) to help you drag around the polygon values. I saw this in a fireship.io video (alligator.io reverse engineer video).
Go here or search for clip path maker to find a drag and drop tool and then paste in values.
In certain cases you might need to do a background div because when you clip the path there will be an unwanted color. It seems like wasted file size to have overlapping background colors so there may be a better option including the property of transform: skew(0, 175deg). Text inside a div will also be skewed by default but you can offset the skew with a negative value. Animation skew gave me some crazy glitchy behavior.
The property of background-blend-mode can be cool to give photoshop like control over say a color combined with the background image. Set a background image then put a background color then use background blend mode styles to get different effects.
Parallax still seems to be a thing. But if it doesn’t work on mobile is it even worth it? Create two divs one normal one parallax. On the parallax div set the before pseudo selector to have no content 100% viewport width and height top zero left zero background image with the URL value position it absolutely and set the z-index to -1. set the transform property to translateZ(-1px) scale(2)
On the body element set the perspective property to -1px to activate that and set the transform-style property to preserve-3d (the parallax div also needs the transform style preserve 3D line. Also set overflow-x to be hidden and the overflow-y to be auto.
Set the non-parallax div to a higher z index like two or higher. z index only works on a position to element so put position to relative.
In traversy media’s tutorial he just put a background attachment property set to fixed (instead of scroll), which created the parallax effect.
Having animated horizontal rules or animated bottom borders using transform: translateX() and transform-origin.
Very subtle animations are definitely a thing like opacity. Image positions relative to one another based on scroll is a good one. Use @keyframes, (also see @-webkit-keyframes). Name your animation by giving it a title right after at keyframes. Put percentages to denote the key frames and the value you want at that percentage. Use the animation CSS property and give it a value of your keyframe title How long you want it to take and ease or infinite value.
SVGs of skewed color boxes in the after pseudo element is a cool one, (Make sure it’s set to no repeat center background sizes set to contain. You could do something like set its position to absolute and set its bottom position to negative 40 and right position to 20.
I’ve been using gradients but you need to make sure they’re subtle so they don’t cheesy. You can also set a background property to radial-gradient (circle, color value) I put the start value for first color and end value for second color.
Background: radial-gradient(circle, color1, 0%, color2, 100%);
Good site to help with gradient values you’re looking for is CSSgradient.io
Masks are cool advanced css effect. Mask-image property can be set to a URL path. I’ll school like the mask image property said to a linear gradient and in parentheses put (to bottom, transparent 25%, black 75%).
Counters essentially allow you to add a prefix with the number that you want. For instance put a number in front of each h3 and increment it as you use more and more h3 elements.
Finish lies with counter-reset property set to section
Now you can do h3::before And in that rule set counter-increment property to section
Descendent Selectors: Really know how to target your child selectors. .card:not(:first-child) {margin-left: -130px;). “not” is the negation pseudo class that does the opposite sot he code above is saying “grab every card that is not the first card.”
Use the tilde: What does .card:focus-within~card. .card:hover~.card do? the tilde ~ is the sibling selector. There are four general selectors: space, >, +, and ~. the space is the descendent selector, the > is the child selector, + is adjacent sibling and ~ is general sibling. The difference between adjacent and general sibling is that adjacent is directly after whereas general is all. The tilde is great because it can select all “after” something like a hover and skip all the before.
StoryBook effect: This is when you give the first letter of the page a very very large font size and weight. Essentially you give p.intro:first-letter a much larger font size display it block float to the left line height 0.5 and 15 pixels of margin on the top right 10 pixels on the bottom and 0 on the left.
Transform: translateX and translateY: This is essentially the position property in After Effects. Need to raise something up? Use translateY(-1rem). Need to move something over? Use translateX(120px).
Color: inherit; Similar to a variable it makes any future changes easier.
Gradient in Text Color: Set the background property to linear gradient or similar, (example: linear-gradient(120deg, aquamarine, hotpink); then set the background-clip property to text. Text-shadow: none is optional but may be neded here. The above code doesn’t work until you add these two properties => -webkit-text-fill-color: transparent; -webkit-background-clip: text; (note: WebKit is a web browser engine used by browsers such as Safari and Chrome. You can make use of WebKit features such as animation, transform, transition, and more through the use of the –webkit prefix in your CSS.) Browser support for gradient in text color is limited.
box-shadow is a basic feature but set the first property (which represents x-offset) to a negative number and you will get a stacked effect. For example to make something on the right appear like its hovering over something on the left set box-shadow: -1rem 0 3rem #000; Also try 2px 4px 5px rgba(0, 0, 0, 0.3); Ive also seen a double used on the box shadow like so: 0 5px 15px RGBA 000.1, 0 6px 6px RGBA 000.1
Mandatory fields: You essentially have pseudo-elements of :required an :optional that you can give properties to
Text selection color: You can change this by simply targeting ::selection and setting the background color.
Scroll bar: Customize the scrollbars colors, track size, track ball, etc. Not all browsers support.
Set html Scroll behavior to smooth offers a cool way to navigate to certain sections of a page using a page ID but apparently it’s not great for accessibility and sometimes if you have a fixed header you may not get the effect you want because The start of the section navigated to may be hidden by the fixed header.
There is a site called CSSbattle.dev where you can battle other designers. Pretty cool.
Don’t forget about letter spacing as a good easy simple way to add some styles. 8px is a good starting point.
Color Animation
@keyframes color-rotate {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(360deg);
}
}
.logo:hover {
animation: color-rotate 1s;
animation-iteration-count: infinite;
animation-direction: alternate
}coolors.co is a cool tool to generate colors automatically
tip: to see what’s currently in local storage type localStorage
tip: to clear type localStorage.clear
I’ve been spending a lot of time with side by side application or browser windows and I am shocked how unresponsive so many sites are.