i have succeded in making pure css parallax, it was hard ! ^^
But I got a problem.
To do the parallax we have to ad overflow-y : scroll propriety in order to scroll the block with perspective propriety from up to down.
The thing is that it force me to ad a ugly scroll bar, how could I remove it ?
Thanks ! :)
Here is my snippet:
*{box-sizing: border-box;}
body{
margin: 0;
}
.parent{
perspective: 200px;
perspective-origin: bottom right;
height: 100vh;
overflow-y: scroll;
}
.parent:before{
content:'';
position: absolute;
background: linear-gradient(white, #A00000);
height: 300vh;
width: 100vw;
}
section{
height: 50vh;
transform-style: preserve-3d;
}
span{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
height: 100%;
width: 100%;
position: absolute;
}
.firstChild{
transform: translateZ(-200px);
}
.secondChild{
background: url('https://image.flaticon.com/icons/png/512/248/248983.png') no-repeat;
transform: translateZ(-100px) ;
}
.secondChild{
transform: translateZ(-300px) ;
}
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> My website is not awesome.</h1>
<div class="parent">
<section><span class="firstChild"></span></section>
<section><span class="secondChild"></span></section>
<section><span class="thirdChild"></span></section>
</div>
</body>
</html>
Add this to your css to make the scrollbar invisible:
.parent::-webkit-scrollbar {
display: none;
}
Related
i am trying to comlete frontenmentor io challenges.I am as beginner in html and css i applied border radius as 10px to the image to round the edges of image. but it is not reflecting. also i added outfit as font family.but it is also not reflecting.i have given the html/css code here.Kindly help me to fix this
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: hsl(212, 45%, 89%);
}
.main{
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img{
width: 250px;
height: 250px;
padding: 1rem;
}
.container{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1{
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container"><div class="main">
<img class= "img" src="/images/image-qr-code.png">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
The border-radius needs to be applied to the .img. However, you won't see it given there is also a padding of a greater amount (1rem). This snippet removed that so you get to see the border-radius.
To increase the generality, as you have given a fixed width and height to the img, I have included an object-fit: contain to ensure all the image is always seen whatever its aspect ratio (you could alternatively use cover to ensure that full size is covered, though it could mean there is some cropping of the image).
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
width: 300px;
height: 500px;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
text-align: center;
border-radius: 10px;
}
.main .img {
width: 250px;
height: 250px;
object-fit: contain;
border-radius: 10px;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="https://picsum.photos/id/1015/300/300">
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
Note, there was also a *body at the start of the CSS. I have just guessed that you meant to remove default margin etc from all elements.
add overflow: hidden css in .main class.
The problem is you have added radius to the parent of the image. When content overflow out of radius, they are visible by default.
So to hide the content you need to put overflow hidden.
Try this, I have added border and set border-radius: inherit (this will simply set the border of child as per parent element's property) to img class.
#import url('https://fonts.googleapis.com/css2?family=Outfit:wght#400;700&display=swap');
*body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: hsl(212, 45%, 89%);
}
.main {
max-width: 250px;
width: fit-content;
height: fit-content;
background-color: hsl(0, 0%, 100%);
align-items: center;
align-content: center;
padding: 1em;
border-radius: 10px;
overflow: hidden;
text-justify: none;
text-align: center;
box-sizing: content-box;
}
.main .img {
width: 100%;
height: 250px;
border: 1px solid black;
border-radius: inherit;
}
.main p {
text-justify: inter-word;
text-align: justify;
}
.container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.main h1 {
font-family: "outfit" sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<title>Frontend Mentor | QR code component</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="main">
<img class="img" src="/images/image-qr-code.png" />
<h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p>
</div>
</div>
</body>
</html>
You need to add the border to the image not the parent div your code should be something like this
.main img{ border-radius: 10px; }
[photo of issue 1I am creating a mock CIA portal to help aid in my personal web dev skills and am running into issues that I cannot locate the answer on google or w3 schools. The issue, I have implemented a hover feature for an image in CSS using an URL to import the image and the image appears cut off on all sides. I went through and changed the size to contain, and the image is fitted inside the area fine but is tiled. please help with eliminating the tiling that is occurring. I used a tutorial I found on google that helped me with the hovering effect etc., that is where the parent and child section is coming from, and happens tp be the area where I am having the issue. Thank you for your time.
CSS:
h1 {
text-align: center;
font-family: courier;
font font-weight: bolder;
color: white;
}
body {
background-color: #152238;
background-image: linear-gradient (#23395d, transparent);
}
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 20%;
}
.parent {
width: 400px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
}
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: contain;
}
.parent:hover .child,
.parent:focus .child {
transform: scale(1.2);
transition: all .5s;
}
HTML:
<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="images/icons/eagle seal.ico">
<img src="images/eagle seal.png" alt="seal">
<head>
<title>CIA</title>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<h1>Central Intelligence Agency</h1>
</body>
</html>
add background-repeat property to the .child selector to be like this:
.child {
width: 100%;
height: 100%;
background-color: transparent; /* Fallback color */
background-image: url("images/eagle seal.png");
background-position: center;
background-size: cover;
background-repeat: no-repeat; }
You can try using the no-repeat property. Link to more info-https://www.w3schools.com/cssref/pr_background-repeat.asp
div {
background-image:url(w3css.gif);
background-repeat:no-repeat;
}
When the card is flipped, the front face is turned to the back and hidden, however, the back face is turned but not made visible. My intention is to have whichever side of the card is front-facing made visible. I have tried a number of variations of placing the backface-visibility attribute within different classes/ids but to no avail.
Below is my current code:
body {
background-image: url("imgs/Bike-Logo.jpg");
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
background-size: 100% 100%;
}
.container {
background: inherit;
}
.card {
width: 350px;
height: 500px;
background: inherit;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
margin-left: -175px;
margin-top: -250px;
border-radius: 8px;
background-color: #707075;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: -25px;
left: -25px;
bottom: 0;
right: 0;
/*frosted div effect*/
background: inherit;
box-shadow: 100px 0px 20px 200px rgba(255,255,255,0.5);
filter: blur(20px);
}
.flip_card_back {
transform: rotateY(180deg);
}
.card.flipped {
transform: rotateY(180deg);
}
.flip_card_front, .flip_card_back {
backface-visibility: hidden;
}
.sign_up_form {
position: relative;
margin: 10%;
background-color: red;
}
.sign_in_form {
position: relative;
margin: 10%;
background-color: blue;
}
.card figure {
color: white;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Login Page</title>
</head>
<body>
<div class="container">
<div id="card">
<div class="flip_card_front">
<form>
<div class="sign_in_form">
<figure>Front</figure>
</div>
</form>
</div>
<div class="flip_card_back">
<form >
<div class="sign_up_form" >
<figure>Back</figure>
</div>
</form>
</div>
</div>
</div>
<button id="flip">Sign In -></button>
<script src="javascript.js"></script>
</body>
</html>
I am creating a simple "coming soon" page and for the life of me cannot figure out how to create an image link that, when hovered over, changes to another image.
I've trawled google and cannot find an answer that works.
I am guessing I am missing something obvious and have overlooked it.
I feel like I can't see the wood for the trees.
Html :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ablockalypse</title>
<meta name="description" content="Ablockalypse">
<meta name="author" content="Coming Soon">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<img src="images/cityscape.png">
<div id="header">
<img src="images/banner.png">
</div>
<div id="logo">
<img src="images/Logo.png">
</div>
<div id="info">
<img src="images/info_red.png">
</div>
</div>
</body>
</html>
Stylesheet :
body {
background-color: #746747
}
#container {
position: relative;
width: 800px;
height: auto;
display: block;
margin: auto;
max-width: 100%;
width: auto\9; /* ie8 */
}
#header {
position: absolute;
top: 20px;
left: 6%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
#logo {
position: absolute;
top: 40%;
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
-ms-transform: rotate(13deg); /* IE 9 */
-webkit-transform: rotate(13deg); /* Chrome, Safari, Opera */
transform: rotate(8deg);
}
#info {
position: absolute;
top: 450px;
left:290px;
width: 276px;
height: 134px;
background-image: url(images/info_red.png) no-repeat;;
}
#info :hover {
background-image: url(images/info_green.png) no-repeat;;
}
I would appreciate any help!
the last selector on your stylesheet, has a space that is causing it not to work.
#info :hover should be #info:hover
I want to make like this box shadow its from a psd file :
i have made a screenshot :
http://s3.postimg.org/k59bfo5s3/boxshadow.png
i don't know how i can make that by code of css
but my other idea I thought also to extract the shadow from PSD file like that
and moove it to my html page but i don't know where i can place the code for image of shadow
http://jsfiddle.net/4pbq2tx8/11/
html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset=utf-8>
<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/carousel.js"></script>
<div id="carousel">
<div class="title">title</div>
</div>
</body>
</html>
css :
#carousel {
border:solid 1px #1a1a1a;
position:relative;
width:903px;
height:299px;
margin:0 auto;
margin-top: 50px;
background:url(http://s22.postimg.org/l2e24m48x/light.png) ;
/* my probleme is here */
box-shadow: url(http://s14.postimg.org/7tmkd1hfl/shadow.png);
}
body {
background-color: #c7c7c7;
}
.title {
position:absolute;
width:902px;
height:47px;
bottom: 0;
left:0;
line-height: 47px;
border:solid 0.5px #686868;
background:url(http://s22.postimg.org/s4bzqt7up/title.png) bottom left repeat ;
}
1/
Try with that:
#carousel:after {
position: absolute;
z-index: 9999;
bottom: -100px;
content: " ";
width: 100%;
height: 100px;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
JSFIDDLE LINK
2/
If you want the shadow to be exact length of 1100px you need to change few things:
.wrap {
position: relative;
width: 1100px;
}
.wrap:after {
position: absolute;
bottom: -95px;
z-index: 9999;
content: " ";
height: 100px;
width: 100%;
background: url('http://s14.postimg.org/7tmkd1hfl/shadow.png') no-repeat center;
background-size: cover;
}
And wrap your #carousel in .wrap
<div class="wrap">
<div id="carousel">
...
</div>
</div>
JSFIDDLE WITH WRAPPER
Your shadow looks like a 3D object, so take advantage of that, and use a 3D pseudo element with a box shadow:
#carousel {
-webkit-perspective: 500;
-webkit-perspective-origin: 50% 50%;
}
#carousel:after {
content: "";
position: absolute;
left: 20px;
right: 20px;
bottom: -45px;
height: 50px;
background-color: #888;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(80deg);
box-shadow: 0 0 20px 15px #888;
}
jsFiddle
Tested on chrome. Should work on Safari too. For other browsers, you will need add their vendor prefixes, -moz-, -ms-.
Old browsers will not support 3D transformations, and that's ok. No shadow will appear.
http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Also, you don't need, and should not use images. You can replicate the same effect with linear gradients.