✍️
cssadvand
  • [BEM] Exploring SMACSS: Scalable and Modular Architecture for CSS
  • 😀CSS-only infinite scrolling carousel animation (ok)
  • css carousel
  • 🤡 Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 1)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 2)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 3)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 4)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 5)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 6)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 7)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 8)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 9)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 10)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 11)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 12) [Phần đặc biệt]
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 13)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 14)
  • 😘Thuộc tính tabindex="-1" không ngờ lại nguy hiểm vậy đọc bài dưới 😌
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 15)
  • 🥸CSS tạo theme cho dark mode đọc bài (Phần 16)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 16)
  • Mẹo để optimize Google Fonts API mà ít dev để ý đọc (Phần 17)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 17)
  • Thật may nhờ có white-space: pre-line đọc (Phần 18)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 18)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 19)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 20)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 21)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 22)
  • Thuộc tính image-rendering nhờ bài (Phần 23) mà phát hiện ra cách làm bức ảnh mờ trở nên rõ nét
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 23)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết 🤡
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 24)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 25)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 26)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 27)
  • 😘mix-blend-mode pha trộn giữa 1 đối tượng với đối tượng bên dưới đó (Phần 28)
    • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 28)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 29)
  • 🥸aspect-ratio (Phần 30)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 30)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 31)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 32)
  • Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 33)
  • 😘CSS Scroll Triggered Animations Full (ok)
  • 🥹Difference between animation and transition in CSS
  • 😄animation-timeline có phải nó làm việc với thanh cuộn (ok)
  • 😍Từ bài animation-timeline làm việc với thanh cuộn tìm ra cách sử dụng background-clip: text;
  • background-clip: text;
  • 😅Sử dụng list-style-type để tạo icon đẹp (ok)
  • 😁Convert css to scss good (ok)
  • 😁CSS - Hướng dẫn: Tạo ảnh động với hàm steps()
  • 😆Multiple image cross fading in CSS - without (java) khá đẹp script (ok)
  • 😇Function css full 🤩
  • 😅[SVG] SVG viewBox Attribute (ok)
  • 😅Tailwind CSS (ok)
  • 😍Thật không thể tin được sử dụng filter: brightness(0) invert(1); để chuyển màu ảnh 🤣
  • 😅Background text matter.vn (ok)
  • 😆Chọn màu, color, color contrast ratio (ok)
  • 😁Tổng hợp Animating SVG text cực đẹp (ok)
  • 😂Chuyển động tròn :(
  • 😆MOVE-BG mepop.vn (ok)
  • 😆Counter Increment list, number xuongkhopbacninh.com (ok)
  • Boxes That Fill Height, full Height(Or More) (and Don’t Squish) (ok)
  • Equal Height (chiều cao bằng nhau) (oK)
  • 😅Sử dụng nodejs và scss cấu trúc thư mục tốt P.1(ok)
  • 🥲Sử dụng nodejs và js cấu trúc thư mục tốt P.2 (ok)
  • === START STUDY P.1 && P.2 SỬ DỤNG NODEJS VÀ CẤU TRÚC ===
  • 😉1 Giao diện sử dụng thuộc tính data-coreui-toggle="dropdown" (ok)
  • === END STUDY P.1 && P.2 SỬ DỤNG NODEJS VÀ CẤU TRÚC ===
  • 😆Css box-shadow đẹp (ok)
  • === START Tutorials Classical BEM stack ===
  • 😀HTML with BEM (ok)
  • 😀CSS with BEM (ok)
  • === END Tutorials Classical BEM stack ===
  • === START SMACSS ===
  • Categorizing CSS Rules
  • Base Rules
  • Layout Rules
  • Module Rules
  • State Rules
  • Theme Rules
  • Changing State
  • === END SMACSS ===
  • All CSS Grid Properties (ok)
  • 😇Column Grid full example(Responsive)
  • === Start Điều quan trọng nhất cách chia cột và thay đổi vị trí ===
  • CSS Grid căn bản - Phần 1
  • CSS Grid căn bản - Phần 2
  • CSS Grid: Holy Grail Layout
  • Sử dụng CSS Grid để xây dựng web layout
  • Luyện tập CSS Grid qua bài tập tạo layout Airbnb, youtube, Pinterest
  • === End Điều quan trọng nhất cách chia cột và thay đổi vị trí ===
  • Overflow:hidden dots at the end full (ok)
  • Gulp để viết Sass && cai dat
  • Cách nhúng font vào svg (ok)
  • font-face Hướng dẫn conver font và nhúng sử dụng online (ok)
  • 😇Create CSS Animations on Scroll (ok)
  • Hiệu ứng hover bằng js hiện phần description (ok)
  • Text Link on Hover phần 1 (ok)
  • Kết hợp transition & transform-origin phần 2 (ok)
  • Text Hover Phần 3 (ok)
  • Social Media Icons hover effect (ok)
  • css rotate a pseudo :after or :before content:""
  • Hiệu ứng ảnh tự zoom, animation, scale phần 1 full (ok)
  • CodePen Home Image zoom on hover - auto run - view (ok)
  • scroll-padding (ok)
  • Tạo vòm giống styleathome (ok)
  • Tổng hợp những css đẹp để làm trang trí (ok)
  • Cách thay đổi màu svg full (ok_)
  • Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)
  • function calc css (ok)
  • Get the scroll distance from bottom to scroll, var distanceFromBottom (ok) vinmec.com (ok)
  • ---------- Start CSSscan không sử dụng ----------------------
  • Unused CSSscan your website for unused CSS selectors (ok)
  • PurifyCSS OnlineRemove unused CSS code from your stylesheets (ok)
  • Remove unused CSS styles from Bootstrap using PurgeCSS (ok)
  • 😆Thêm column, media bootstrap, custom bootstrap (ok)
  • ---------- End CSSscan không sử dụng ----------------------
  • Xây dựng blog đơn giản (Node + React)
  • Các tham số của Gulp
  • File đã thực hành với Gulp (ok
  • gulp-livereload (chưa đọc)
  • Tối ưu hiệu năng Google Fonts (ok)
  • Học CSS GRID thông qua những layout phức tạp
  • [GRID] sử dụng grid xây dựng layout giống Masonry (ok)
  • PageSpeed Insights Chrome Extension (ok)
  • Tăng tốc website bằng cách cải thiện front-end
  • Code chuẩn SEO là gì
  • 10 CSS3 Animation Tools phổ biến
  • Trang check SEO OKE
  • Làm sao để SEO từ khóa?
  • Kiểm soát web typography với việc hiển thị CSS font (ok)
  • Các mẫu phông chữ hiển thị và thuộc tính hiển thị phông chữ của CSS
  • Một số mẹo tối ưu hóa HTML/CSS/JS đúng chuẩn
  • Web Performance
  • Preload, Prefetch, Preconnect (ok)
  • Tối ưu hóa phần Front end cho trình duyệt (part 1)
  • Tối ưu hóa phần Front end cho trình duyệt (part 2)
  • Sử dụng thuộc tính attr html && css (ok)
  • Disable Auto Zoom in Input “Text” tag - Safari on iPhone (ok)
  • CSS submit button weird rendering on iPad/iPhone submit color (ok)
  • Turn off iPhone/Safari input element rounding (ok)
  • scroll bongda.com.vn (ok)
  • Làm chiếc xe ô tô chuyển động giống 2020.yp.vn (ok)
  • Sự khác biệt giữa :empty và :blank trong CSS (ok)
  • Is there a CSS parent selector? (ok)
Powered by GitBook
On this page
  • Shadow 1
  • Shadow 2

Was this helpful?

Css box-shadow đẹp (ok)

Shadow 1

<div class="guten-block-container">
  <div class="guten-posts guten-ajax-flag">
    <article class="guten-post post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
      <div class="guten-thumb"><a href="https://hello.hanoistreetwisetours.com/hello-world/">
          <div class="thumbnail-container ">
            <img width="1920" height="1280" src="https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920.jpg 1920w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-300x200.jpg 300w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-1024x683.jpg 1024w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-768x512.jpg 768w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-1536x1024.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px">
            <div class="guten-overlay"></div>
          </div>
        </a></div>
      <div class="guten-postblock-content">
        <div class="guten-post-category "><span><a href="https://hello.hanoistreetwisetours.com/category/uncategorized/" class="category-uncategorized">Uncategorized</a></span></div>
        <h3 class="guten-post-title"><a href="https://hello.hanoistreetwisetours.com/hello-world/">Hello world!</a></h3>
        <div class="guten-post-meta"></div>
        <div class="guten-post-excerpt">
          <p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p>
        </div>
        <div class="guten-post-meta-bottom">
          <div class="guten-meta-readmore icon-position-after">
            <a href="https://hello.hanoistreetwisetours.com/hello-world/" class="guten-readmore">Read More<i aria-hidden="true" class=""></i></a>
          </div>
        </div>
      </div>
    </article>
  </div>
</div>
<div class="guten-block-container">
    <div class="guten-posts guten-ajax-flag">
    <article class="guten-post post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
            <div class="guten-thumb"><a href="https://hello.hanoistreetwisetours.com/hello-world/"><div class="thumbnail-container ">
    <img width="1920" height="1280" src="https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" loading="lazy" srcset="https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920.jpg 1920w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-300x200.jpg 300w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-1024x683.jpg 1024w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-768x512.jpg 768w, https://hello.hanoistreetwisetours.com/wp-content/uploads/2022/08/cornelian-cherry-7093063_1920-1536x1024.jpg 1536w" sizes="(max-width: 1920px) 100vw, 1920px">
			<div class="guten-overlay"></div>
</div></a></div>
            <div class="guten-postblock-content"><div class="guten-post-category "><span><a href="https://hello.hanoistreetwisetours.com/category/uncategorized/" class="category-uncategorized">Uncategorized</a></span></div><h3 class="guten-post-title"><a href="https://hello.hanoistreetwisetours.com/hello-world/">Hello world!</a></h3>
        <div class="guten-post-meta"></div><div class="guten-post-excerpt"><p>Welcome to WordPress. This is your first post. Edit or delete it, then start writing!</p></div>
    <div class="guten-post-meta-bottom">
        <div class="guten-meta-readmore icon-position-after">
        <a href="https://hello.hanoistreetwisetours.com/hello-world/" class="guten-readmore">Read More<i aria-hidden="true" class=""></i></a>
    </div>
    </div></div>
        </article>
</div>
</div>
.guten-PilNVS .guten-postblock .guten-postblock-content {
    margin-top: 0px;
    padding-top: 20px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    box-shadow: 0px 3px 15px rgb(225 225 225 / 82%);
}

.guten-PilNVS .guten-postblock .guten-thumb .thumbnail-container {
    height: 414px;
    padding-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

Shadow 2

<div class="swiper-slide swiper-slide-active" style="width: 386.667px; margin-right: 10px;">
  <div class="guten-testimonial-item">
    <div class="testimonial-box hover-from-left">
      <div class="comment-bio">
        <div class="bio-details">
          <div class="profile-image"><img src="https://hello.hanoistreetwisetours.com/wp-content/themes/travey/assets/img/man-person-hair-white-profile-male-451655-pxhere.com.webp" alt="Glenn Mcdaniel"></div>
          <ul class="rating-stars"></ul><span class="profile-info"><strong class="profile-name">Glenn Mcdaniel</strong>
            <p class="profile-des">Tourist Form Spain</p>
          </span>
        </div>
      </div>
      <div class="comment-content">
        <p>The private guides were interesting and knowledgeable. We felt that they were more than just guides.</p>
      </div>
    </div>
  </div>
</div>
.guten-testimonials.guten-MNO08q .swiper-container .guten-testimonial-item .testimonial-box {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.guten-MNO08q .guten-testimonial-item .testimonial-box {
    margin-right: 0px;
    margin-left: 9px;
    padding-top: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    background-color: rgba(255, 255, 255, 1);
}
.guten-testimonials.style-4 .testimonial-box {
    padding: 40px 40px 20px 40px;
    overflow: hidden;
    box-shadow: 0px 3px 10px 0px rgb(0 0 0 / 16%);
    border-radius: 10px;
    position: relative;
}
Previous=== END STUDY P.1 && P.2 SỬ DỤNG NODEJS VÀ CẤU TRÚC ===Next=== START Tutorials Classical BEM stack ===

Last updated 2 years ago

Was this helpful?

😆