CSS3 - 随笔分类(第5页) - Zhentiw

[CSS] Using transform: scale(0) for hiding element

摘要：For a radio button control, when hide selected status, we can use: .input__control::before { content: ""; width: 0.5em; height: 0.5em; // box-shadow w 阅读全文

posted @ 2021-03-05 21:52 Zhentiw 阅读(124) 评论(0) 推荐(0)

[CSS] Using box-shadow as background colors

摘要：box-shadow works better than background-color on printable version: .input__control { display: grid; place-content: center; width: 1em; height: 1em; b 阅读全文

posted @ 2021-03-05 21:49 Zhentiw 阅读(60) 评论(0) 推荐(0)

[CSS] Center children elements

摘要：Best way to do is using grid: .input__control { display: grid; place-content: center; width: 1em; height: 1em; border: 0.1em solid var(--color-default 阅读全文

posted @ 2021-03-05 21:47 Zhentiw 阅读(55) 评论(0) 推荐(0)

[CSS] Using inline-grid to gain easy control over gap and size

摘要：<div class="form-group"> <label class="form-control radio"> <span class="form-control__input radio__input"> <input type="radio" name="radio" /> <span 阅读全文

posted @ 2021-03-05 21:36 Zhentiw 阅读(53) 评论(0) 推荐(0)

[CSS] Customer focus / disabled style for select element

摘要：Because there is no parent selector in CSS, we'll need to add an additional element to assist us in providing a focus style. We'll also add it to our 阅读全文

posted @ 2021-03-05 03:33 Zhentiw 阅读(76) 评论(0) 推荐(0)

[CSS] Using single grid-template-area and justify-self to select arrow down icon in select

摘要：<div class="form-group"> <label for="standard-select">Standard Select</label> <div class="form-field select"> <select id="standard-select" name="stand 阅读全文

posted @ 2021-03-05 03:20 Zhentiw 阅读(72) 评论(0) 推荐(0)

[CSS 3] Using CSS attribute selector

摘要：For example, we have single selector and multi selector: <div class="form-group"> <label for="standard-select">Standard Select</label> <div class="for 阅读全文

posted @ 2021-03-05 03:10 Zhentiw 阅读(54) 评论(0) 推荐(0)

[CSS 3] max()

摘要：While generally we want to set font-sizes in rem, there's a particular issue on mobile iOS, where if the field text is not at least 16 pixels, it will 阅读全文

posted @ 2021-03-03 21:10 Zhentiw 阅读(75) 评论(0) 推荐(0)

[SCSS] SCSS and CSS Variables

摘要：We'll define the color palette and create the basic screen styles for our project in addition to Sass helpers for our form design system. We will set 阅读全文

posted @ 2021-03-02 23:58 Zhentiw 阅读(176) 评论(0) 推荐(0)

[CSS] Word-break with hyphens

摘要：.ow { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; white-space: normal } Post 阅读全文

posted @ 2021-02-17 18:01 Zhentiw 阅读(70) 评论(0) 推荐(0)

[CSS 3] Overflow & sticky problem

摘要： <div class="wrap"> <div class="headers"> <div class="scroller"> <div class="track"> <div class="heading">Heading 1</div> </div> ... </di 阅读全文

posted @ 2021-01-18 16:17 Zhentiw 阅读(155) 评论(0) 推荐(0)

[CSS 3] Apply Aspect Ratio Sizing to Images with CSS object-fit

摘要：The CSS property object-fit instructs an img to act as the container for its own contents. We can then use the value cover to have the image content b 阅读全文

posted @ 2020-12-20 21:35 Zhentiw 阅读(104) 评论(0) 推荐(0)

[CSS3] Create Viewport Responsive Layout Spacing Using CSS Clamp

摘要：Learn how to use the modern CSS property clamp() to create responsive layout sizing that adjusts to the viewport size without the use of media queries 阅读全文

posted @ 2020-12-20 21:32 Zhentiw 阅读(109) 评论(0) 推荐(0)

[CSS3] Apply Image Filter Effects With CSS

摘要：Apply a grayscale and blurred effect on an image without the use of graphics software by using the CSS filter property. Additionally, use an inset box 阅读全文

posted @ 2020-12-20 21:28 Zhentiw 阅读(111) 评论(0) 推荐(0)

[CSS] Use CSS Variables with Calc and HSL to Implement Dark Mode

摘要：In this lesson, we use CSS variables with calc and hsl to implement a rudimentary dark mode. We can do this by adjusting the lightness of our colors b 阅读全文

posted @ 2020-11-02 16:22 Zhentiw 阅读(121) 评论(0) 推荐(0)

[CSS 3] Enabling CSS manipulation inside the shadow DOM using the part pseudo class

摘要：The part pseudo class allows consumers of a web component to manipulate certain key elements inside the Shadow DOM. In this lesson we will explore two 阅读全文

posted @ 2020-10-29 22:04 Zhentiw 阅读(119) 评论(0) 推荐(0)

[CSS] Use CSS Transforms to Create Configurable 3D Cuboids

摘要：In this lesson, we use CSS transforms to create configurable 3D cuboids. Using CSS transforms in combination with scoped CSS variables, we are able to 阅读全文

posted @ 2020-10-26 21:37 Zhentiw 阅读(179) 评论(0) 推荐(0)

[CSS] Use CSS Variables Almost like Boolean Values with Calc (maintainable css)

摘要：In this lesson, we explore how you can use CSS variables almost like Boolean values in combination with calc(). By setting a variable to 1 or 0 and th 阅读全文

posted @ 2020-10-26 21:29 Zhentiw 阅读(131) 评论(0) 推荐(0)

[CSS 3] Use Multiple Background Images to Create Single Element CSS Art

摘要：In this lesson, we create a face for a head using layered comma-separated background images. CSS allows us to layer as many background images as we wa 阅读全文

posted @ 2020-10-14 02:21 Zhentiw 阅读(82) 评论(0) 推荐(0)

[CSS3] Use CSS Variables to Maintain the Aspect Ratio for an Element

摘要：section img { --aspect-ratio: calc( 4 / 3); --height: 30vmin; --width: calc(var(--height) * var(--aspect-ratio)); height: var(--height); width: var(-- 阅读全文

posted @ 2020-09-15 23:42 Zhentiw 阅读(139) 评论(0) 推荐(0)

Answer1215

随笔分类 - CSS3

公告