Seeking advice from experienced CSS designers on creating a similar background pattern without relying on div tags like in this example: http://codepen.io/juanbrujo/pen/IrAfF
Seeking advice from experienced CSS designers on creating a similar background pattern without relying on div tags like in this example: http://codepen.io/juanbrujo/pen/IrAfF
Here is the suggested CSS:
.back {
position: absolute;
width: 99%;
height: 99%;
background: linear-gradient(180deg, #6e529d 0%, #d97b93 100%);
overflow: hidden;
}
.back:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: -50%;
top: 0px;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: top left;
background-image: linear-gradient(44.9deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 25%, transparent 25%),
linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 25.391%, transparent 25%);
background-size: 20em 20em;
background-position: 0em 0em, 10em 10em, 10em 10em, 0em 0em;
}
Alternatively, you can achieve a similar effect without using absolute positioning by applying the following CSS:
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
overflow: hidden;
}
body:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: -50%;
top: 0px;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: center;
background-image: linear-gradient(44.9deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 7.18em, transparent 7.16em),
linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0%, rgba(128, 128, 128, 0.05) 25%, transparent 25%),
linear-gradient(225deg, rgba(0, 0, 0, 0.05) 0%, rgba(128, 128, 128, 0.05) 25.391%, transparent 25%);
background-size: 20em 20em;
background-position: 0em 0em, 10em 10em, 10em 10em, 0em 0em;
}
body:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #6e529d 0%, #d97b93 100%);
}
You can also check out a demo using 100% dimensions here.
A peculiar issue arises with the Bootstrap 5 Carousel placed inside a Flexbox where it unexpectedly expands in width (pushing other flex-items aside) when transitioning between images. This behavior persists even when the immediate container is set to disp ...
Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...
The image currently in use: https://i.stack.imgur.com/piK6l.jpg Here is how I've implemented it using Vue.js, Bootstrap, and CSS: Code Snippet <div class="landing"> <div class="container text-white details h-100"> ...
What is the recommended way to apply CSS styles to a specific component? For instance, in my App.js file, I have added Login and Register components for routing purposes. In Login.css, I have defined some CSS styles and then imported it into Login.js. T ...
I'm looking to truncate long text with an ellipsis, but it doesn't seem to be working. Is there something wrong with my code or how can we improve it? CODESANDBOX -----> CLICK HERE <Typography variant="body2" color="blac ...
I have a fixed sidebar with two ul elements. I attempted to position the blue ul at the bottom of the fixed div, but it is not aligning as intended. <div class="sidebar"> <ul style="background:green;"> <li>test</li> <li>test ...
I've managed to get my CSS looking just the way I want it on my 1366x768 laptop screen, with the element centered at the bottom of the page. However, when I switch to a larger screen, the footer moves to a different position higher up on the page. An ...
After creating a basic web page, I encountered an issue with the footer. No matter what adjustments I make, the text is not centered and it does not stay fixed when changing the browser height. To view the code snippet and preview, visit: ...
Take a peek at the following site: . Notice how, as you scroll down, the background image appears to be fixed. It's almost like one of the pages acts as a window allowing you to see the background image. How can I achieve this cool effect? ...
This particular piece of code is responsible for populating an inner div within an image slider by making an Ajax call : $.ajax({ type: "GET", dataType: 'json', url: $(this).attr('href') }).done(function (result) { ...
After struggling for some time, I can't seem to figure out how to center elements in the middle of a page without having a lengthy navigation bar at the bottom of the screen. Does anyone have any suggestions? https://codepen.io/picklemyrickle/pen/XWj ...
I have a minor issue that I need assistance with. I am working on a PHP project where I need to dynamically generate product information on a webpage. Specifically, when a user clicks on the "Quick Look" option, a pop-up window should appear displaying rel ...
I'm attempting to replicate this visual effect in my own carousel, featuring semi-transparent images on the left and right sides. However, I'm encountering a negative result with my project when transitioning between slides at : here. This is th ...
Is there a way to change my default navbar into a fixed navbar when I scroll? I have tried adding data-spy="affix" data-offset-top="200", which works but doesn't look quite right. Should I create a new CSS class or is there an easier solution availab ...
My goal is to search for all hyperlinks on a webpage that contain an XML download link and download them in a continuous loop. When I click on these hyperlinks, a form pops up that needs to be completed before I can proceed with the download. However, I ...
I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...
Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...
I've been working with Jssor Slider Maker and I'm using the vertical preview template that features two columns on the left side and a maximized image on the right side. After pulling the code from the developers pack, it includes scripts, CSS an ...
My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...
Is there a way to create a jQuery plugin or JavaScript script that automatically loops through each CSS hover effect (from an external stylesheet) and binds it with a double tap event? Tap 1 - Triggers the CSS :hover effect Tap 2 - Acts as a click (follo ...