This is the 26th day of my participation in the August More Text Challenge

Using the new features of CSS3, the application scenarios of pictures have more possibilities.

Card type picture

Use box-shadow to create a three-dimensional card effect:

div.card {
  width: 200px;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0.0.0.0.2), 0 6px 20px 0 rgba(0.0.0.0.19);
}

.card img {
  width: 100%;
}
Copy the code

Responsive picture

Responsive images automatically adapt to all screen sizes.

img {
  max-width: 100%;
  height: auto;
}
Copy the code

Reactive gallery

When the window is larger than 700px, four images are displayed in a row; Windows larger than 500px and smaller than 700px display two images in a row; Less than 500px, one image in a row. With media query and percentage width implementation, notice here switch to IE border-box model:

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0; }}@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%; }}Copy the code

Filter filter

Filter, which applies graphical effects such as blur or color offset to elements.

The CSS standard contains some functions that implement predefined effects:

Attribute values describe
none Default value, no effect.
blur ( px ) Apply gaussian blur to the image, the larger the value, the more fuzzy; Accept length values, not percentages.
brightness(%) Brightness controlThe picture looks brighter/darker.

0%, the image will be completely black;

100%, the image has no change;

Value over 100%, the picture is brighter.
contrast(%) Contrast adjustment.

Original image is 100%;

The higher the value, the lower the contrast.
drop-shadow(h-shadow v-shadow blur spread color) Set the shadow effect.

Setting mode andbox-shadow Very similar (exceptinsetKeywords are not allowed), the difference is, usefilterSome browsers offer hardware acceleration for better performance.
grayscale(%) Gray setting.

The grayscale of the original image is 0%. The larger the value is, the larger the grayscale is.
hue-rotate(deg) Hue rotation.

If the value is a multiple of 0DEg or 360deg, the image has no change.
invert(%) Invert the input image.

0%, the image has no change; 100% is a complete reversal.
opacity(%) Transparency adjustment.

0%, is completely transparent, 100%, the image has no change.
saturate(%) Saturation adjustment.

100%. No change in the image.

The higher the value, the higher the saturation.
sepia(%) Convert the image to dark brown.

0%, the image has no change.

The higher the value, the more obvious the dark brown effect.
url() Accepts an XML file that sets aSVG filter, and can contain an anchor point to specify a specific filter element.

filter: url(svg-url#element-id)

Image preview (Modal popover)

When you click on the thumbnail of an image, a pop-up window will appear to show the original image and achieve the preview effect.

When you click on an image, a popup window appears (hidden by default, display: None). The image-source in the preview window is provided by the clicked thumbnail (this.src).

// Get the modal window
var modal = document.getElementById("myModal");

// Get the image mode box, Alt attribute as the image to pop up the description of the Text
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function () {
  modal.style.display = "block";
  modalImg.src = this.src;
  modalImg.alt = this.alt;
  captionText.innerHTML = this.alt;
};
Copy the code

Brief introduction to the new characteristics of CSS3

  • Border Border
  • Background & Gradient
  • Text Indicates the Text & @font-face
  • Transform element Transform
  • Transition effect
  • Animation Animation
  • Column Multi-column layout
  • Resize & Box-sizing & Outline-offset
  • Images into the order
  • Button in the advanced
  • Multimedia Query