Category: Css

We are creating an animation class .zoom-in-out-element, make it repeat forever, and apply it to HTML element. Explain the detail of the animation set: Here is Css /* animation */.zoom-in-out-element { animation: zoom-in-zoom-out 3s ease infinite;}@keyframes zoom-in-zoom-out { 0% { scale: 75%; } 50% { scale: 100%; } 100% { scale: 75%; }} Here is […]

We’ve got some long text strings (no spaces in between) in design, and we are wondering how to deal with these when it comes to responsive sizing. Here’s what I’m dealing with: Here’s a snippet with the CSS code to fix: a { text-decoration: none !important; color: var(--primary); font-weight: 600; word-wrap:break-word; overflow-wrap:break-word } after fixing […]

the table is sticky for the first table th and table td. Selector elements was used : ::-webkit-scrollbar — the entire scrollbar. ::-webkit-scrollbar-thumb— the draggable scrolling handle. ::first-of-type— every element that is the first child, of a particular type, of its parent. Css style on table : :root{ --primary:#0B3259; } table { margin: 1em 0; […]

Font size and scale sizefor legibility font should be between 14px -16px on body and heading 1 to 6 should use https://typescale.com/ to scale font fit with your browser. CSS variablesyou can set and define your primary color on root and other class you can use by function var(). :root{ --primary:#0B3259; --secondary:#004274; --activeborder:#FF5737; } .main […]

Facebook Page Plugin doen’t responsive because It is frame that embed from facebook page profile. making it responsive by adding style on frame width:100%. The solution you can put code in your css as below: .fb-page, .fb-page span, .fb-page span iframe[style] { width: 100% !important; margin-bottom:1rem; } The end results. for my website,I have tested […]

getting all tags and have some style in Worpress as below code. I hope this code can help you. <ul class="tag-ul"> <?php $tags = get_tags('post_tag'); if ( $tags ) : foreach ( $tags as $tag ) : ?> <li class="tag-list"> <a class="tag" href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>" title="<?php echo esc_attr( $tag->name ); […]

A CSS selector selects the HTML element(s) you want to style. We can divide CSS selectors into five categories: Simple selectors (select elements based on name, id, class) Combinator selectors (select elements based on a specific relationship between them) Pseudo-class selectors (select elements based on a certain state) Pseudo-elements selectors (select and style a part of an element) […]

the way to set text absolute on the top corner image,first you need to set container class as relative and elements in container must be absolute if It is over on .   <h1>Place Text In Top-Left Corner Of An Image</h1>   <div class="container">       <img src="https://png.pngtree.com/thumb_back/fh260/background/20200714/pngtree-modern-double-color-futuristic-neon-background-image_351866.jpg" alt="">       <div class="bottomleft"> […]

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. Classes and IDs are used as hooks for CSS styles. While the way CSS renders is not affected by the use of classes and hooks, they give developers the ability to pinpoint HTML elements that they […]