Css Only 3D Bar Graph

14.11.2013

Made with: HTML,CSS

View Code

Css Only 3D Bar Graph

Css Text Filling With Water

11.11.2013

A text filling with water animation, for preloaders and such.

Made with: HTML,CSS (SCSS)

View Code

Css Text Filling With Water

Css Dashed Shadow

6.11.2013

Pure CSS hipster-ish typographic dashed shadow.

Made with: HTML,CSS (SCSS)

View Code

Css Dashed Shadow

Border-Radius Weave

6.11.2013

Made with: HTML,CSS (Sass)

View Code

Border-Radius Weave

Northerli Logo

6.11.2013

Animated SVG logo for Northerli. Hover for motion.

Made with: HTML,CSS (SCSS)

View Code

Northerli Logo

Centroid-Centred Css Triangle

5.11.2013

CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid. Using the :after pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle's centroid.

Made with: HTML (Slim),CSS (Sass)

View Code

Centroid-Centred Css Triangle

3d Text

5.11.2013

Made with: HTML,CSS (SCSS)

View Code

3d Text

Transformer Tabs

4.11.2013

One set of semantic HTML. One set of JS. Tabs that turn into a small-screen-capable tap-to-reveal fully-functional system.

Made with: HTML,CSS (SCSS),JS

View Code

Transformer Tabs

Css Kodama

4.11.2013

Kodama (from Princess Mononoke) drawn and animated using CSS only.

Made with: HTML,CSS

View Code

Css Kodama

Scroll Flip-Book

30.10.2013

Using background images and different sections revealing each fixed background image to create a flip-book effect.

Made with: HTML,CSS

View Code

Scroll Flip-Book

Bootstrap Navbar Toggle Show/Hide

26.10.2013

Made with: HTML (Haml),CSS (SCSS),JS

View Code

Bootstrap Navbar Toggle Show/Hide

Cinema Ticket

25.10.2013

Made with: HTML,CSS (SCSS)

View Code

Cinema Ticket

Star Rating Widget

24.10.2013

Pure CSS star rating widget.

Made with: HTML,CSS

View Code

Star Rating Widget

Circular Links Menu

24.10.2013

Responsive circular links menu.

Made with: HTML

View Code

Circular Links Menu

Range Price Slider

23.10.2013

3D HTML5 range price slider.

Made with: HTML,CSS,JavaScript

View Code

Range Price Slider

Arc Reactor - Ironman

23.10.2013

Made with: HTML,CSS (SCSS)

View Code

Arc Reactor - Ironman

Progress Bars

19.10.2013

Static progress bar vs. progress bar with opposing animation.

Made with: HTML,CSS (SCSS)

View Code

Progress Bars

Sky Gradients

19.10.2013

24 CSS3 sky gradients for a future experiment. Click on to get a full width preview.

Made with: HTML (Haml),CSS (SCSS)

View Code

Sky Gradients

Tab Controls Using Html And Css

18.10.2013

Clicking on the labels is effectively the same as clicking on the input boxes. The radio inputs are hidden with CSS. When a radio is selected, their curious tab content neighbors show up. That's it! The only drawback is you won't be able to style the selected tab without resorting to some JS, but that shouldn't be a very big deal.

Made with: HTML (Pug),CSS (Stylus)

View Code

Tab Controls Using Html And Css

Resume Concept

15.10.2013

Elegant and simplistic resume concept.

Made with: HTML,CSS

View Code

Resume Concept