Pens from Karen Menezes https://codepen.io/imohkay/ en nospam@codepen.io Copyright 2024 2023-08-04T16:29:06-07:00 Embossed Effect with Pure CSS https://codepen.io/imohkay/pen/VwVBeLv https://codepen.io/imohkay/pen/VwVBeLv Karen Menezes

See the Code - See it Full Page - See Details

]]>
Embossed Effect with Pure CSS 2023-08-04T16:23:03-07:00
Slanted buttons with one side rounded: Clip path https://codepen.io/imohkay/pen/JRaaep https://codepen.io/imohkay/pen/JRaaep Karen Menezes

See the Code - See it Full Page - See Details

]]>
Slanted buttons with one side rounded: Clip path 2016-10-17T12:38:03-07:00
Slanted Buttons with one side rounded https://codepen.io/imohkay/pen/BLOrqV https://codepen.io/imohkay/pen/BLOrqV Karen Menezes

See the Code - See it Full Page - See Details

CSS buttons that are rounded on one side and slanted on the other, using generated content to create the rounded corners.

]]>
Slanted Buttons with one side rounded 2016-10-17T14:55:56-07:00
Input with icon and decorative line https://codepen.io/imohkay/pen/wWzWPb https://codepen.io/imohkay/pen/wWzWPb Karen Menezes

See the Code - See it Full Page - See Details

This input simply uses multiple background images, with a linear gradient and an SVG to generate an input-icon module, with no extra divs.

]]>
Input with icon and decorative line 2023-08-04T16:22:07-07:00
CSS Variables: Custom properties with SVG https://codepen.io/imohkay/pen/KVqEYE https://codepen.io/imohkay/pen/KVqEYE Karen Menezes

See the Code - See it Full Page - See Details

CSS variables can be used directly inside SVGs to style their properties via presentation attributes like fill and stroke. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
CSS Variables: Custom properties with SVG 2023-08-04T16:24:45-07:00
CSS Variables: Custom properties respect the cascade https://codepen.io/imohkay/pen/jWwJJd https://codepen.io/imohkay/pen/jWwJJd Karen Menezes

See the Code - See it Full Page - See Details

Custom properties respect the cascade. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
CSS Variables: Custom properties respect the cascade 2023-08-04T16:25:20-07:00
Sass variables with the @font-face rule https://codepen.io/imohkay/pen/YwQgBV https://codepen.io/imohkay/pen/YwQgBV Karen Menezes

See the Code - See it Full Page - See Details

This pen looks at handling custom fonts using Sass variables, by standardising the font family names, across different weights and styles. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
Sass variables with the @font-face rule 2023-08-04T16:25:58-07:00
DRY: Use the CSS currentcolor keyword https://codepen.io/imohkay/pen/NxgJEL https://codepen.io/imohkay/pen/NxgJEL Karen Menezes

See the Code - See it Full Page - See Details

Never repeat yourself when you can use currentcolor. Even when you're using Sass variables, always use inherit and currentcolor native CSS values where possible. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
DRY: Use the CSS currentcolor keyword 2023-08-04T16:27:26-07:00
DRY: Use the CSS inherit keyword https://codepen.io/imohkay/pen/YwQgjZ https://codepen.io/imohkay/pen/YwQgjZ Karen Menezes

See the Code - See it Full Page - See Details

Never repeat yourself when you can use inherit. Even when you're using Sass variables, always use inherit and currentcolor native CSS values where possible. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
DRY: Use the CSS inherit keyword 2023-08-04T16:28:42-07:00
Reusing Sass variables https://codepen.io/imohkay/pen/gPREox https://codepen.io/imohkay/pen/gPREox Karen Menezes

See the Code - See it Full Page - See Details

A simple demo indicating the reuse of one variable to provide height and padding values for other elements. Part of a demo for a Smashing Magazine article published in Jan 2016 titled "Variables: The Backbone of CSS Architecture".

]]>
Reusing Sass variables 2023-08-04T16:29:06-07:00