I have problems with google page speed and my nextjs app. Google determines that one of the elements is reducing almost 60% of the page performance. Those elements are just simple colorized elements that are placed as background of the page.
I'm calling them like:
<span className={`triangle first`} />
<span className={`triangle second`}/>
<span className={`triangle third`} />
and CSS
.triangle {
overflow: hidden;
position: fixed;
filter: blur(512px) !important;
-webkit-filter: blur(512px) !important;
width: 400px;
height: 400px;
&.first {
top: -20rem;
left: -6rem;
background-color: $primary;
}
&.second {
top: -0rem;
right: -15rem;
background-color: $blue;
transform: rotate(-58deg) skewX(-30deg) scale(1, .866);
}
&.third {
top: 70rem;
left: -10rem;
background-color: $green;
transform: rotate(-130deg);
}
}
I know they are to big and so on, but I don't know how to implement such background the other way. How could I optimize that?
Related
I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)
Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.
im looking about how to put a watermark text in my webpages in left top corner over all the content
that is, independently of the content of the pages, have always a watermark text
have readed about brianium/watermarkjs but seems this for iamges watermarking.
I just made this code on codepen so you can see it.
codepen
<div id="watermark">
<p>Watermark</p>
</div>
#watermark {
color: #d0d0d0;
font-size: 20pt;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
position: absolute;
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
left:-45px;
top: -500px;
}
I am trying to create a banner in the top left corner that stays put and does not disappear or get cut off when the window shrinks. This is the site: indigolubricants.com and it can be accessed with the password: indigodenver . This is a squarespace site and some things behave differently than regular html and css.
HTML:
<div class="corner-ribbon top-left sticky red shadow">Hover over symbols to see product categories</div>
This is the css with the position as fixed. The problem with this is that I want the ribbon to scroll with the rest of the page. Please let me know of any solutions. Either css or javascript. I have already tried changing the position properties. If the element is absolute then I can't move it. Other elements get cut off when the page is resized.
CSS:
/* The ribbons */
.corner-ribbon{
width: 1000px;
background: #DAA520;
position:fixed;
top: 0px;
left: 100px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
/* Different positions */
.corner-ribbon.top-left{
top: 200px;
left: -300px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
Try applying these styles to the element you want to fix. You can change the height and width accordingly.
height: 20vh;
width: 10vw;
top: 0;
position: fixed;
I want to add two pictures in an frame/img.We can rotate the image on the frames.but that rotation doesnot go out from his boudry only strechable to its axis:
I have added/submit an image and add on the background but thats not correct.Because if i have to add two pictires we cannot put two backgroung-images?.We have to see where the column/frame is empty just select the picture for that frame on the picture and we can able to resize/adjust like fabric.Js.
Simply do this with CSS only:
#frame {
width: 700px;
height: 525px;
position: relative;
overflow: hidden;
background: transparent url(https://i.stack.imgur.com/E4BCt.png) 0 0 no-repeat
}
#frame:before,
#frame:after {
transform: rotate(21deg);
content: '';
position: absolute;
width: 230px;
height: 350px;
z-index: -1
}
#frame:before {
transform: rotate(21deg);
top: 88px;
left: 410px;
background: url(https://image.ibb.co/mHHved/frame1.jpg) 0 0 no-repeat
}
#frame:after {
transform: rotate(-23deg);
top: 45px;
left: 77px;
background: url(https://image.ibb.co/fivsQJ/frame2.jpg) 0 0 no-repeat
}
<div id="frame"></div>
I won't make some of this arcs on my website and I don know how to do it I tried to do it but I can't !
Referance Image
You could use a before/after pseudo element on one of the blocks. Then on that element you'd give it the same background color and use transform: skew(-2deg); to give it the tilted affect.
See the example below, it's fairly simple enough once you understand how you can use pseudo elements to your advantage.
section {
position: relative;
float: left;
width: 100%;
background: black;
height: 300px;
}
.skewedSection {
background: red;
}
.normalSection:before {
content: "";
background: red;
height: 100px;
-webkit-transform: skewY(-2deg);
transform: skewY(-2deg);
position: absolute;
left: 0;
right: 0;
bottom: -50px;
z-index: 2;
}
<section class='normalSection'>
</section>
<section class='skewedSection'>
</section>