Home > Web Front-end > HTML Tutorial > CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose

CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:28:20
Original
1143 people have browsed it

CSSBox

CSSBox -一个纯CSS Lightbox代替。An example page is available in the gh-pages branch, or online on GitHub Pages.

Why CSSBox?

  • Actually lightweight (903b including comments, 607b excluding comments, unminified!)
  • Centers the image
  • Adds a nice, realistic shadow to the image
  • Dims the background
  • Completely responsive, works on any screen size
  • Has a pretty fade in animation
  • Absolutely no JavaScript

Usage

Upload cssbox.css to your server and add a stylesheet link to it in your CSS.

Add your images like this:

<img  class="cssbox_thumb" tabindex=1 src="image_thumbnail.png" / alt="CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose" ><span class="cssbox_full"><img  src="image_full.png" / alt="CSSBox -一个纯CSS Lightbox代替_html/css_WEB-ITnose" ></span>
Copy after login

When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen.

License

Creative Commons Zero 1.0

项目地址: https://github.com/TheLastProject/CSSBox

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template