Kategorie: html / CSS

How can I preload images?

All you have to do is insert the following line in the page header. <link rel=”preload” href=”https://test.com/your-image.jpg” as=”image”>

CSS: How do I make it so that the mix-blend-mode is not applied to child element?

If you use the mix-blend-mode, it automatically affects all child elements of the object in question. By using a pseudo element and the position, this problem can be solved. .elementor-portfolio-item:hover .elementor-portfolio-item__overlay { position: relative; width: 100%; height: 100%; transition: .5s; } .elementor-portfolio-item:hover .elementor-portfolio-item__overlay:before { background-color: #c0001f; mix-blend-mode: multiply; transition: .5s; content: ”; width: 100%; height: […]

CSS: How can I customize the phone link on iOS devices?

On iOS devices, phone numbers that are linked are highlighted. This may not match the design under certain circumstances. The following remedies can fix this. Remove automatic highlighting completely: <meta name=”format-detection” content=”telephone=no” />Automatische Markierung optisch anpassen: Adjust the appearance of automatic marking: a[href^=tel]{ color:#000; text-decoration:none; }

CSS: How can I change a radio button to a normal button?

Radio buttons should not always look the way they do and sometimes they cannot be replaced by other form elements, so a solution is needed. #form1 input[type=”radio”] { opacity: 0 !important; position: fixed; width: 0px; } #form1 label:before, #form1 label:after { opacity: 0 !important; } #form1 label { display: table-cell; background-color: #ff0000; padding: 10px 20px; […]

CSS: How do I create a fade effect on page change (transition)?

The class “animate-in” must be inserted in the body. .animate-in { -webkit-animation: fadeIn .1s ease-in; animation: fadeIn .1s ease-in; } .animate-out { -webkit-transition: opacity .1s; transition: opacity .1s; opacity: 0; } @-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { […]

CSS: How do I create a narrow left and right arrow?

.eicon-chevron-right::before { font-family: “Font Awesome 5 Free”; content: “” !important; width: 35px; height: 35px; border-color: #000; display: inline-block; border-bottom: 2px solid; border-left: 2px solid; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); margin-right:10px; } .eicon-chevron-left::before { font-family: “Font Awesome […]

CSS: How can I address classes in an SVG files?

Individual elements / layers in SVG files can be manipulated via CSS if they have been created correctly beforehand. For this, the desired layer or several layers should be stored in a separate folder and this folder should be named uniquely.