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 and box-shadow Very similar (exceptinset Keywords are not allowed), the difference is, usefilter Some 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