HTML / CSS Only Off-canvas Slide and Push Navigation

Must Read : HTML / CSS Only Off-canvas Slide and Push Navigation

A modern, mobile-friendly navigation solution to create an off-canvas slide or push menu using pure CSS / CSS3 and plain html. It currently provides 4 CSS files to define the look of the off-canvas menu:

  • slide.css: left slide menu
  • right-slide.css: right slide menu
  • left-push.css: left push menu
  • right-push.css: right push menu

Basic usage:

Load the slide.css to create a left slide menu on your web page.

Load the Font Awesome 4 for menu toggle icons.

Create a menu toggle control using CSS checkbox hacks.

The html structure for the slide menu.

Create a menu toggle button inside the main content.

[button style=”btn-link btn-lg” icon=”glyphicon glyphicon-download-alt” align=”left” iconcolor=”#1e73be” type=”link” target=”_blank” title=”Download” link=”https://github.com/acasaprogramming/pure-css-offcanvas-menu/archive/master.zip” linkrel=””]

Change text & background color while selecting text using CSS3

Must Read : Change text & background color while selecting text using CSS3

Change text color and background color while you are selecting text for copy or any other purpose, make your web page impressive with extra design using this css selection text color change, getting bored of usual selecting color on your web page, so try this code. While selecting content of any web page that selected with the default color of blue, so change it with this css.

While trying to copy any content from any site, we have to select some text using mouse, while selecting those time the default design will come with the blue, for that we are changing the selecting color text and background using very simple coding in css3. Let see the coding.

CSS

And the above coding for change the color of text change while you are selecting a text.

CSS

The above code is for change the background color of selecting text.

And we can make it for a particular area too. Like just call the class/id or tag name before the ::selection that will take for the particular area.

CSS

and this code doesnot support with IE-9, it support only IE9+, and for Mozilla firefox need the –moz-selection for make it support in it.
Take a look at the demo page.