Three fun uses of ::before and ::after

-

 Three fun use of ::before and ::after

1.filter background





2.mixed-color background


3.gradient shadow





Learn from Kevin Powell

Popular posts from this blog

Fancyapps — easily build overlay windows with carousel

-
Image
  I used to play around with these gallery boxes with old versions. Now the Fancybox is the 4th version with more functions, including plugins, events, options. They even provided how to use React easily demo. I remember when I was learning Javascript, the fancy project is building a carousel, it took some time and logical understanding, but it’s a good way to learn the logic JS though. But for now, I will be grasping the eyeball by this fancy Javascript library. Since it’s a fast-developing world, the result should be precise, accurate, and fast, right? Fanyapps includes  Fancybox, Carousel, and Panzoom . Fancybox is a flex gallery container, which is touch and mobile optimized with swipe, drag, and pinch-to-zoom gestures. Carousel is a display place with smooth animations and more functions inside. Panzoom is a customized zooming function. They combined smoothly and more functionally. Official site Playaround the demo here Step1: import the library with npm or using CDN I li...
Read more

Speech text Reader with Javascript

-
Image
  course from Brad Traversy Github code  Features: web speech API HTML toggle-button for hiding and showing the text box the select option list will fetch from API  textarea value pass into the message text when reading the main show up the list of data (images and text) CSS hide the text box outside top of client Page and position turns down when adding classlist show when the box is active , the box-shadow shows up and the image fit in the box grid the box at the main part. four columns and responsive screen setting up JS get the DOM needed the data of images and text array loop the data to get the image and the text, set the box dom and classList, then append to the main section when clicking the box, setTextMessage() and speanText(),also for the box-shadow effect with active classname For fetching the text and language with Web speech API .  new message of input text value as a parameter the text pass to message value speakText with speecgSynthesis.speak()  ...
Read more

列表浮动的局限——float:left 下一行错位

-
Image
简简单单的几幅图片加上解释文字的内容，想让每一行对齐显示。 曾经以为float：left可以解决一切， float真心很好用，不过真的有很大的坑。 我的实例中计划让六张图片显示在两行，可是。。。。 HTML:  CSS： 而我主要的想法就是让每一块左浮动，display:inline-block，可以显示在一行。 究其原因，是上面的文字溢出了，导致下一行放不下。 不过 如何解决 呢？ 然后我大胆的 去掉了float：left ;然后竟然变得更好看了，不过挤在一起。 因为它保证了图片加上文字是在一行的。那么，现在就是让每个块上下左右对齐。 当然为了让图片都一样大小，设置宽度100%，即父元素item的宽度大小。然后，嘿嘿，成功啦。 这就是果断放弃float的后果。 当然我是做的3列效果，如果想根据浏览器的大小，产生浮动效果，可以设置item的宽度为一个固定宽度。
Read more