In this tutorial we will create a modal window using only HTML5 and CSS3 properties. The techniques used to create a functional modal box are CSS3’s transition, opacity, pointer-event, and background gradient properties.
Continue reading “Create a modal window using pure HTML5 and CSS3”
Category: CSS
PrettyPhoto Minimal Theme – a pure CSS prettyPhoto simple theme
I have recently used prettyPhoto for a project and I have to admit that it is a great tool to have in hand when it comes to modal pop-ups.
It has lots of types of content support and it is really simple to customize. prettyPhoto also comes with lots of features and 5 built-in themes…
- light_rounded
- dark_rounded
- light_square
- dark_square
- pp_default
- minimal theme – which will add here with minimal and pure CSS
…which you can easily change via JavaScript customization. But this is not the subject of this tutorial.
I prefer a default minimal and simple theme for prettyPhoto and the ability to add stuff if I need it and not the opposite. So this is my little CSS to create a simple theme for prettyPhoto Continue reading “PrettyPhoto Minimal Theme – a pure CSS prettyPhoto simple theme”
The easy way to clear floats. Clearfix div using simple CSS3
This easy clearing method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like “clearfix” to it. Then apply this CSS:
|
1 2 3 4 5 6 7 |
.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } |
This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn’t quite the whole story, as additional code needs to be used to accommodate for older browsers.
Cool CSS animation effects using transitions, rotations and postioning
This is not a tutorial about CSS transition effect and does no pretend to show the functionality of this CSS property. But anyway, if few words the css transition effect provide a way to control the speed of animation changes to CSS properties.
For example, if you change the color of an element from white to black, normally the change is instantaneous. With CSS transitions enabled, the change occurs over an interval of time you can specify, following an acceleration curve you can customize.
Continue reading “Cool CSS animation effects using transitions, rotations and postioning”
Pure CSS3 and HTML web form design
This a CSS3 based web form design. It was used only CSS and HTML to rich the result. Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a basic web form into something beautiful.