Creating basic and more advanced shapes in CSS
The process of creating shapes in CSS is simple, with squares and rectangles being the easiest shapes. Simply specifying width and height, these shapes can be easily created. To create more advanced shapes such as circles and ovals, this can be accomplished by incorporating border-radius. If you want to create more intricate shapes, using :before and :after pseudo-elements or additional HTML elements will be needed. In addition, using the transform and position properties is essential for creating a variety of shapes.
CSS Shapes: Square, Rectangle, Circle, Elipse, Isosceles Triangle, Parallelogram, Trapezoid, 5-6-8 or 12 point Star, Pentagon, Hexagon, Octagon and much more.
About the Author: Albert Walicki
Albert Walicki is a frontend developer with more than six years of experience as a freelancer. In addition to his role as a developer, he serves as a mentor to junior frontend developers, and offers guidance and support.
Why and How Would I Use This
Creating more advanced shapes is a great way to call attention to your page or website. Rather than having the same simple shapes such as circles and ovals, you can incorporate more advanced shapes easily to improve your site and its appearance.
Social Media:
Breaking to a new row with flexbox
When creating a flexbox layout with multiple rows of items, controlling what item goes on which row is difficult. However, an easy way to control the size and position of the flex items is using width or flex-basis to position the item where you want it to be. To create a break to a new row you can create a collapsed row between two items. To create a line-break flex item, using flex-grow:1 in between each area you would like the break to be to create different rows in between the flex items.
About the Author: Tobias Ahlin
Tobias Ahlin is a website builder and designer as well as a blogger. He also works in Design engineering at Github, and has prior jobs with Spotify and Mojang. He blogs about CSS, JavaScript, A/B Testing as well as animation.
Why and How Would I Use This
Flexbox layouts are a great way to display your page and its information or data. By creating a complex flexbox layout it can allow for a more precise page. I would use the different widths and flex-basis of the flex-items to position all items in a linear display rather than all text on one line.
Social Media:
CSS Text balancing with text-wrap:balance
With new developments, Chrome Canary provides support for the CSS property text-wrap: balance. Which allows automatic calculation and equal division of words between the two lines of the text elements. By applying text-wrap: balance, titles can be balanced effectively, and guarantee no single word occupies an entire line. Additionally, by creating the text-balance the max-width will not be affected, so all words will be displayed in the text location that was provided.
About the Author: Ahmad Shadeed
Ahmad, an independent Product Designer and Front End Developer from Palestine, has over 9 years of experience in design and web development. He enjoys tackling complex design challenges and working on large-scale projects. Ahmad also shares practical insights about CSS on his blog.
Why and How Would I Use This
Text-balancing is ideal for creating pages as your website should display all needed information without being crammed into a small textbox space, text balancing allows you to fit your text but also not shrink the text or the font size.
Social Media:
The Surprising Things That CSS Can Animate
There are many different things CSS properties can do, such as animation. Using interpolation (when your browser executes a CSS property animation, it generates a series of intermediate values throughout the duration of the animation). For example if we use a div box, when we incorporate height values to an object ranging from a low number to a high number it will make the box become taller. If you want the text inside the div to be lowercase or uppercase you can animate the text-tranform to lowercase or uppercase to change the text. There are many other animations that CSS properties can do such as fade/go away animations for models, layering animations, and shadowing animations.
About the Author: Will Boyd
Will Boyd graduated from Georgia Tech with a degree in computer science, specializing in databases. He works in front-end development and enjoys working with CSS. Currently, Will is employed at Square, he previously worked at Salesforce, Amazon, and Turner Broadcasting.
Why and How Would I Use This
CSS animations are a easy way to improve your site, by adding a different div box height or width I can manipulate the div to display the specific way I want it to look, Or if I want the text to change from upper to lowercase on a form I could do that after a user fills out the form incorrectly to highlight what they missed in the form.