personifiedblue—swordofdamocles
CSS Test Tube
The Test Tube shape is a great example of CSS design with a pre-planned variability structure. Color, size, levels, transitions, & features can all be easily set or altered as desired.
Article & Style Code here
Spongecut - Oh, It’s Possible…
CSS Test Tube - In Progress
- CSS only (no images).
- Hovering the tube lowers the liquid level.
- One element with span. Example:
<div class=”tube blue”><span class=”tube_top></span></div>
- Designed to easily replace variable liquid colors, turn measurement gradients on or off, and to allow for varying liquid levels, either set or transitional.
Demo available soon…
CSS Knife Shape
By definition, this might not even be considered a shape. Icon, shape, silhouette, image… although similar in nature, each of these terms describes something subtley different. The CSS Knife is anything but subtle.
Article & Style Code here
Spongecut - Oh, It’s Possible…
CSS - One element, one shape
Better. Underutilization is a form of waste so I used an empty content rule for the fuller, along with some other minor modifications.
CSS - One element, one shape
Left - Single color shape (same old thing usually shown on the internet)
Right - Same single element, my CSS style
NOTE: background added for “no tricks” clarity
Article coming soon…
CSS Ruler Shape
A Ruler seemed like a logical progression to the other “office supply” shapes already created: a Pencil and Notebook Paper. Although a simple shape, there are still a couple of valuable style design rules to be learned.
Spongecut - Oh, It’s Possible…
CSS Pencil Shape
Creating triangular shapes with CSS can be accomplished easily. The real struggle lies in combining complex backgrounds with or behind those shapes at the same time. The CSS pencil shape attempts to cover both.
Article & Style Code here
Spongecut - Oh, It’s Possible…
Easy enough…
CSS Pencil Shape - Work in progress
The “In Progress” checklist:
- Eraser needs a better, adjusted gradient background
- Eraser sleeve gradient should match lighting of body & point
- Article explanation needs to be created
CSS Pencil Shape - Work in progress
Parts as follows:
> Eraser - styled rectangle (still needs work)
> Eraser sleeve - styled rectangle w/before pseudo for effects
> Pencil body - 1 rectangle w/before and after pseudos for sides
> Pencil point - Also the main point of the entire shape :)
> Pencil lead - triangle shape w/before pseudo for highlight
> Pencil lead after pseudo - used to apply styled text to pencil body
The “In Progress” checklist:
- Eraser needs a better, adjusted gradient background
- Eraser sleeve gradient should match lighting of body & point
- Article explanation needs to be created
I still think it’s pretty sah-wee-ought!
