I wanted to customise a nice spinner in CSS to indicate loading and it works nicely and looks great in everything except for Mozilla. Can anyone explain to me why, and how to fix it? Or at least point me in the right direction.
<style>
.loader {
display: inline-flex;
width: 0.75em;
height: 0.75em;
border-radius: 50%;
outline: none;
position: relative;
animation: rotate 1s linear infinite
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 0.15em solid;
animation: prixClipFix 1.8s linear infinite;
}
:is(h1, h2, h3, h4, h5) .loader::before {
border-width: 0.1em;
}
#keyframes rotate {
100% {
transform: rotate(360deg)
}
}
#keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
100% {
clip-path: polygon(50% 50%, 0 0, 10% 0, 10% 0, 10% 0, 10% 0)
}
}
</style>
<div>
<!-- <div class="spin"></div> -->
<h1>Loading
<div class="loader"></div>
</h1>
<h2>Loading
<div class="loader"></div>
</h2>
<h3>Loading
<div class="loader"></div>
</h3>
<h4>Loading
<div class="loader"></div>
</h4>
<h5>Loading
<div class="loader"></div>
</h5>
Loading
<div class="loader"></div>
</div>
Looking into it, I found that FF doesn't appreciate the div rotating while the polygon grows and shrinks. Turning either one off solves the problem however I would like it to do both.
Thanks to Miriam it is now fixed! I added border-radius: 0.01px; and overflow: hidden; to the .loader parent class.
I'm building my new website on SquareSpace, and wanted something a bit more fancy for my landing page.
I got this button here ("Button 49," from https://getcssscan.com/css-buttons-examples).
My problem now is getting the text centered and being able to adjust the size.
I tried this text-align but nothing changed, also tried to mess with the line-height but thinks just got funky; and for the size of the button, I can mess with the inputs there but if I do that with the text not centred it gets weird.
I'm using a custom font, but you can use Arial to visualize.
Any help is welcome, I don't know code language or how to explain my problem, but thanks for reading.
As you can see on the image, there is a something wrong on the red circle and the text seems a bit down IMAGE OF BUTTON
Here's my current code:
button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
font-family: 'Industry Inc Base';
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
text-align: center;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
#keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
<p><button class="button">Enter</button></p>
The text 'Enter' is centered inside your button, so that's fine. Text is centered by default inside a button, so you can leave out text-align: center; in your CSS.
One way to center your button on the page is with CSS flex layout. This works by wrapping the content in a flex container (see CSS code below). This can be the p element you first had, but as this is not really a paragraph, I would use a div element.
Concerning the 'glitch text' displaying lower than the button text, this is likely due to the font indeed. I changed it to font-family: 'sans-serif'; and it looks fine to me.
Finally, please note that it is illegal to wrap a button inside anchor tags. You have to put your anchor tags (i.e. your 'link') inside the button tags.
div {
font-family: 'sans-serif';
display: flex;
justify-content: center;
}
button,
button::after {
width: 380px;
height: 86px;
font-size: 36px;
background: linear-gradient(45deg, transparent 5%, #fff 5%);
border: 0;
color: #000;
letter-spacing: 3px;
line-height: 80px;
box-shadow: 8px 0px 0px #282828;
outline: transparent;
position: relative;
}
button::after {
--slice-0: inset(50% 50% 50% 50%);
--slice-1: inset(80% -6px 0 0);
--slice-2: inset(50% -6px 30% 0);
--slice-3: inset(10% -6px 85% 0);
--slice-4: inset(40% -6px 43% 0);
--slice-5: inset(80% -6px 5% 0);
content: 'ENTER';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 3%, #FF5E1A 3%, #7b00ff 5%, #FF5E1A 5%);
text-shadow: -3px -3px 0px #7b00ff, 3px 3px 0px #FF5E1A;
clip-path: var(--slice-0);
}
button:hover::after {
animation: 1s glitch;
animation-timing-function: steps(2, end);
}
#keyframes glitch {
0% {
clip-path: var(--slice-1);
transform: translate(-20px, -10px);
}
10% {
clip-path: var(--slice-3);
transform: translate(10px, 10px);
}
20% {
clip-path: var(--slice-1);
transform: translate(-10px, 10px);
}
30% {
clip-path: var(--slice-3);
transform: translate(0px, 5px);
}
40% {
clip-path: var(--slice-2);
transform: translate(-5px, 0px);
}
50% {
clip-path: var(--slice-3);
transform: translate(5px, 0px);
}
60% {
clip-path: var(--slice-4);
transform: translate(5px, 10px);
}
70% {
clip-path: var(--slice-2);
transform: translate(-10px, 10px);
}
80% {
clip-path: var(--slice-5);
transform: translate(20px, -10px);
}
90% {
clip-path: var(--slice-1);
transform: translate(-10px, 0px);
}
100% {
clip-path: var(--slice-1);
transform: translate(0);
}
}
<div><button class="button">Enter</button></div>
I have one image with drop-shadow and I want text at the bottom of the image with overlay class named img_text which takes the same shape as image. I don't know how to create this.
Can anyone help me how to achieve this?
Here I have attached what I want.
Here is my code in pen that I have done.
The issue is, a child element cannot be related to it's parents background, the two shapes are independent of each other.
This is a classical HTML challenge, when table layouts were pulled together with interactive effects, to use more images in more colourful images with Photoshop filters applied to text menu items or gifs.
As Basil suggested an additional image could provide the illusion that the two shapes are related, alternatively the base image could look as required, then only one line of label may be provided.
This CSS may be applied:
backdrop-filter: sepia(.9) hue-rotate(0deg)
Rather than the background on .images_div .img_text
Play around with the hue-rotate to see if you can make the same orange.
The only way to achieve this is by using an image background that have the same shape with less opacity like this one instead of this background-color: rgba(0,0,0,0.5);.
You can try this code
CSS code
* {
box-sizing: border-box;
}
.container {
position: relative;
}
.container p {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
background-color: rgba(0,0,0,0.5);
color: #F2F2F2;
font-size: 22px;
text-align: center;
background-color: red;
width: 180px;
display: block;
padding: 10px 15px;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.container .image_sec_img p:hover{
background-color: rgba(248,105,60,0.75);
}
.one{
margin-left: 16px;
}
and the html code
<div class="container">
<div class="image_sec_img">
<img src="https://i.stack.imgur.com/Xcapo.png">
<p class="one">Hello</p>
</div>
</div>
Try to implement this way.
.image_box {
display: inline-block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
padding: 0px 0px 4px 5px;
position: relative;
}
.image_box:before {
background-color: #f8693c;
left: 0px;
top: 20px;
bottom: 0;
right: 5px;
position: absolute;
content: "";
}
.content {
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
background-color: rgba(248, 105, 60, 0.9);
color: #fff;
padding: 15px 15px 30px 25px;
clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
.image_box img {
display: block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
<div class="image_box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6lRhSay69skaUU-y9M7J_drwez_QBJTPholjizBmGbfJbLYVH&s">
<div class="content">
Image Title
</div>
</div>
Hope this will works fine for you.
Thank you...
here you go miss Akshita sorry for my side
css
.cont1 {
display: inline-block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
padding: 0px 0px 4px 5px;
position: absolute;
}
.cont1:before {
background-color: #f8693c;
left: 0px;
top: 40px;
bottom: 0;
right: 5px;
position: absolute;
content: "";
}
.text1{
position: absolute;
bottom: 0;
left: 0px;
right: 0px;
background-color: rgba(248, 105, 60, 0.9);
color: #fff;
text-align: center;
padding: 15px 15px 30px 25px;
clip-path: polygon(0% 0%, 100% 0%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
.cont1 img {
display: block;
clip-path: polygon(0% 100%, 0% 5%, 10% 3%, 20% 1.7%, 35% 0.4%, 50% 0%, 65% 0.4%, 80% 1.7%, 90% 3%, 100% 5%, 100% 93%, 90% 95.7%, 80% 97.7%, 70% 99.2%, 60% 99.9%, 50% 100%, 40% 99.3%, 30% 97.7%, 20% 95.9%, 10% 95.3%, 0% 96%);
}
html
<div class="cont1">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT6lRhSay69skaUU-y9M7J_drwez_QBJTPholjizBmGbfJbLYVH&s">
<div class="text1">
Hello
</div>
</div>
.Div {
border: double;
height: 400px;
width: 325px;
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 93%);
}
<div class="Div"></div>
.Div {
border: double;
height: 400px;
width: 325px;
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0 93%);
transform: rotate(90deg);
}
you can create div tag and apply CSS on it
style="background-image:url('img.png');background-size:12px";
and Also can check the div style.
I'm trying to do something seemingly easy but its not working out for me.
I have a simple button with a shimmer hover effect. I want have the same button effect applied to a button that is shaped like a hexagon. I thought I'd be pragmatic and just overlay the button with a clip-path (I don't care about the browser support). but, sadly the pseudo-element affect the clip-path making it unusable. Am I missing something simple? Or will the combination of these two never work?
.button {
outline:none;
border:none;
padding:20px;
display:block;
margin:0 auto;
cursor:pointer;
font-size:16px;
font-weight: bold;
background-color:#DBBD68;
text-transform: uppercase;
position:relative;
transition:all 0.5s ease;
overflow: hidden;
color:#fff;
&.hex{
width: 280px;
height: 280px;
position:absolute;
top: 0;
left:0;
-webkit-clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
clip-path: polygon(20% 50%, 12% 60%, 20% 70%, 82% 70%, 89% 60%, 80% 50%);
}
&:before {
content: '';
background-color: rgba(255,255,255,.5);
width:100%;
height:20px;
position:absolute;
left:-135px;
transform: rotateZ(45deg)
}
I made a Fiddle to showcase the issue: https://jsfiddle.net/0m5wmvu8/
You tried to do something crazy with .hex, but the only thing you should have added was the clip-path. Just change it to:
&.hex{
-webkit-clip-path: polygon(50% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
clip-path: polygon(50% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
https://jsfiddle.net/8sfc3ott/