*I'm using Bootstrap CSS grid and reset for this exercise. I'm adding the contents in WordPress, using Gutenberg. Please bear with me, my explanation might be difficult to understand - English isn't my first language.
--
So I've created a container with two borders on top to create an upside-down pyramid. This shows the previous container's background colour and image. I've also added an image with a diagonal gradient within the parent container as shown below:
/*------------------------------------*\
MAIN
\*------------------------------------*/
.header {
position: relative;
background: #2f2655;
height: 500px;
}
.header:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.1);
}
.header .logo {
text-align: center;
position: absolute;
left: 0;
bottom: 30px;
width: 100%;
padding: 20px 0;
z-index: 5;
}
.header .logo a {
display: inline-block;
margin: 0 auto;
text-decoration: none;
}
.header .logo a h1 {
color: #fff;
}
.section {
position: relative;
overflow: hidden;
margin-top: -20px;
padding-top: 20px;
}
.section .surround {
position: relative;
padding-bottom: 40px;
}
.section .surround:before {
content: "";
position: absolute;
left: -8px;
width: 10%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
z-index: 5;
}
.section .surround:after {
content: "";
position: absolute;
right: -8px;
width: 90%;
height: 20px;
top: -20px;
background-color: #fff;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
z-index: 5;
}
.section.blue-wrapper:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url(https://i.imgur.com/nnHq6IP.png);
background-repeat: no-repeat;
background-position: top right;
z-index: 5;
}
.section.blue-wrapper .surround *:not(.btn-white) {
color: #fff;
}
.section.blue-wrapper .surround,
.section.blue-wrapper .surround:before,
.section.blue-wrapper .surround:after {
background-color: #00aeef;
z-index: 4;
}
.section.grey-wrapper .surround,
.section.grey-wrapper .surround:before,
.section.grey-wrapper .surround:after {
background-color: #e1e1e1;
}
.section .content {
text-align: center;
position: relative;
padding: 20px 0;
}
.section.grey-wrapper .section-title {
color: #777;
}
/*------------------------------------*\
MISC
\*------------------------------------*/
*.btn-white {
color: #fff;
margin: 1rem 0;
padding: 0.6rem 2.3rem;
background: none;
display: inline-block;
border: 1px solid #fff;
border-radius: 20px;
text-decoration: none;
transition: all 0.1s linear;
}
*.btn-white:hover {
text-decoration: none;
background: #fff;
color: #0e0048;
}
<!doctype html>
<html lang="en-GB" class="no-js">
<head>
<meta charset="UTF-8">
<title>
<?php wp_title(''); ?>
<?php if(wp_title('', false)) { echo ' :'; } ?>
<?php bloginfo('name'); ?>
</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
</head>
<body class="home">
<div id="mm-page">
<!-- header -->
<header class="header" role="banner" style="height: 200px;">
<div class="header-items">
<!-- logo -->
<div class="logo">
<a href="#">
<h1>Logo</h1>
</a>
</div>
<!-- /logo -->
</div>
</header>
<!-- /header -->
<div class="section blue-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<article class="content">
<h2 class="section-title">Coloured Wrapper</h2>
<p>This is a sample text.</p>
<a class="btn-white" href="#">Button</a>
</article>
</div>
</div>
</div>
</div>
</div>
<div class="section grey-wrapper">
<div class="surround">
<div class="container">
<div class="row">
<div class="col-12">
<section class="content">
<h2 class="section-title" style="margin-bottom: 0;">Grey</h2>
</section>
</div>
</div>
</div>
</div>
</div>
My problem is: anything beneath the ::before element are unclickable. Are there any other ways I could code this while keeping the design?
Solutions I've tried:
Give ::before a set width of 380px, but this only fixes my problem for bigger screens.
Add the background-image within the section class instead. But the top-right border overlapping the background-image instead - not my desired result.
Use the property pointer-events: none on the ::before element.
Thank you arieljuod. This question is now answered.
I've added pointer-events: none inside ::before element.
Related
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 would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
Hello take a look at this picture of the comp I am trying to mimic through html and css.
The top div is a regular div with a white background.
The bottom div will have a background video.
The html structure is simple and will look something like this:
<div class="top-div">
<!-- stuff -->
</div>
<div class="bottom-div">
<video autoplay="" loop="">
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.ogg" type="video/ogg">
</video>
</div>
CSS:
.top-div {
height: 500px;
width: 100%
}
.bottom-div {
height: 500px;
width: 100%;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
filter: brightness(30%);
-webkit-filter: brightness(30%);
}
I know how to properly set up the video, but I am unsure how to go about making the slanted effect.
I was thinking I could use a psuedo element to create a triangle and place it on top of the div and have it z indexed over the video div, but that seems a little hacky.
Is there a best practice to do this? I didnt write this question for someone to give me full code. I just need someone to point me in the right direction and I can do it myself.
Thanks!
Easy and simple way is use CSS transform: skew. Add this inside your div where you want to be slanted then adjust the degrees.
transform: skew(0deg,-5deg);
Above skew style means (0deg(x), -5deg(y)) axis.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
}
.headerimage {
background-color:#003a6f;
height:300px;
width:100%;
background-size:cover;
position:relative;
z-index:-1;
}
#backshape {
z-index:1;
display:block;
float:left;
margin-top:-100px;
width:100%;
background:white;
transform:skew(0deg,10deg);
-ms-transform:skew(0deg,10deg); /* IE 9 */
-webkit-transform: skew(0deg,-5deg);
}
.full-image {
width: 100%;
height: 200px;
}
.footer {
height: 100px;
background: rgb(253, 253, 253);
width: 100%;
margin-top: 425px;
z-index: 500;
position: relative;
}
<div class="headerimage">
</div>
<div id="backshape">
<img src="http://placehold.it/540x500" class="full-image">
</div>
<div class="footer">
</div>
I've put together a pen using skew as #adam suggested.
http://codepen.io/anon/pen/XNMPWG
The HTML
<header class="header" id="header">
<div class="skew">
<div class="header-inner">
<h1 class="logo">White space</h1>
</div>
</div>
</header>
<div class="container">
<main class="main">
<div class="main-container">
<section>
<h1>Video</h1>
<p></p>
</section>
</div>
</main>
</div>
The CSS
html {
font-family: 'Roboto Condensed';
color: #fff;
background: #fafafa;
}
body {
padding: 0em 0em;
}
.header {
z-index: 1;
position: relative;
}
.header .skew:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
overflow: visible;
width: 100%;
height: 250px;
background: #00bcd4;
z-index: -1;
-webkit-transform: skewY(-10deg);
-moz-transform: skewY(-10deg);
-ms-transform: skewY(-10deg);
-o-transform: skewY(-10deg);
transform: skewY(-10deg);
-webkit-backface-visibility: hidden;
backface-visibility: initial;
}
.header .skew .header-inner {
padding: 20px;
margin-left: auto;
margin-right: auto;
}
.logo {
margin: 0;
}
section
{
text-align:center;
color: white;
background-color: red;
height: 100vh;
width: 100%;
position: absolute;
top: 0;
}
section h1 {
text-align: center;
color: white;
padding-top: 150px;
}
skewY() skews an element along the Y-axis by the given angle.
transform: skewY(-10deg);
I am a beginner, and I want to create a menu which is a cross in the middle of the screen. The cross should have in each section a button which works with a hover. I could work something out already, however it does not really work, since it can changes according to the browser size. I want that it always stays in the middle and does not move at all. Attached you can find the code I came up with. Furthermore I created a jsfiddle document: https://jsfiddle.net/50xxq5vc/
Thanks for your help!
<!DOCTYPE HTML>
<HTML>
<Head>
<Title>This is a Test</Title>
<style>
#import url('http://fonts.googleapis.com/css?family=Lobster');
body
{
background-color:#ffffff;
}
p{
color:#000000;
}
img.party{
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.birne
{
position:absolute;
margin-top:15%;
margin-left:48%;
opacity: 1; filter: alpha(opacity=100);
}
.birne:hover
{
opacity: 0.3; filter: alpha(opacity=30);
}
.love
{
opacity: 1; filter: alpha(opacity=100);
}
.love:hover
{
opacity: 0.3; filter: alpha(opacity=30);
}
.hellotext
{
font-size: 18px;
font-family: 'Lobster', cursive;
position:absolute;
margin-top:12%;
margin-left:45%;
}
</style>
</head>
<Body>
<div><img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png"/></div>
<div class="love">
<span class="hellotext">This is a test</span>
<div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
</div>
</Body>
</html>
To center an element it is easiest to give it a fixed width and height. Then, by placing it absolute, you can center it. I redid your HTML:
<img class="party" src="http://s15.postimg.org/ms7vel74b/cross.png" />
<p>
<img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png" /><br />
This is a test
</p>
And the CSS:
#import url('http://fonts.googleapis.com/css?family=Lobster');
img.party {
position: absolute;
z-index: 5;
width: 272px;
height: 272px;
left: 50%;
top: 50%;
margin-left: -136px; /* half of the width */
margin-top: -136px; /* half of the height */
}
p {
opacity: 0.3;
font-size: 18px;
font-family:'Lobster', cursive;
text-align: center;
position: absolute;
z-index: 10;
width: 272px;
height: 136px;
left: 50%;
top: 50%;
margin-left: -136px;
margin-top: -136px;
}
p:hover {
opacity: 1;
}
Also see this JSFiddle
Note that it might need some adjusting in the height settings of the p, you can alter that by changing the margin-top.
Maybe you could try with something like this: https://jsfiddle.net/8xc2415y/3/
<div id="container">
<div id="wrapper">
<div id="topsection">
<div class="love">
<span class="hellotext">This is a test - TOP</span>
<div> <img class="birne" src="http://s23.postimg.org/sugyvz04n/birne.png"/></div>
</div>
</div>
<!-- other sections -->
</div>
</div>
and css like:
#container{
width:272px;
height:272px;
background-image:url(http://s15.postimg.org/ms7vel74b/cross.png);
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
#container #wrapper{
position: relative;
width: 120%;
height: 120%;
top: -10%;
left: -10%;
}
#topsection {
position:absolute;
height: 130px;
margin: auto;
left: 0;
right: 0;
top: 0;
}
im having this issue.. keep in mind i'm no expert in CSS i just did my best i could to make a website for my company.
The problem is when i resize the site or view it on XAMPP with ipad its all overlaped!
i want it to stop moving and show scroll bars like normal site would not overlap content!
however when its full screen its fine its on my 1920x1080 monitor.
my CSS:
#charset "utf-8";
/* CSS Document */
body
{
height: 900px;
padding: 0;
margin: 0;
background-image: url(Images/bkg.jpg);
}
.header
{
position: absolute;
width: 100%;
height: 100px;
top: 0;
background-image: url(Images/header.jpg);
border-bottom: #CCC 2px solid;
box-shadow: 0px 0px 25px #F00;
}
.logo
{
position: absolute;
top: 70px;
left: 50%;
margin-left: -203px;
}
#dog
{
position: absolute;
right: 0px;
width: 244;
height: 500;
top: 15%;
}
.buttonholder
{
Width: 600px;
height: 150px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -230px;
color: #FFF;
font-size: 18px;
}
#textholder
{
position: absolute;
left: 100px;
top: 35%;
font-size: 36px;
color: #FFF;
font-family: 'Tangerine', cursive;
width: 650px;
height: 300px;
}
#galleryholder
{
width: 460px;
height: 284px;
position: fixed;
left: 50%;
margin-left: -230px;
top: 50%;
margin-top: -145px;
border: #CCC 1px solid;
-moz-box-shadow: 0 0 25px 8px #000;
-webkit-box-shadow: 0 0 25px 8px#000;
box-shadow: 0 0 25px 8px #000;
overflow: auto;
}
/* gallery */
#s3slider
{
width: 500px;
/* important to be same as image width */
height: 300px;
/* important to be same as image height */
position: relative;
/* important */
overflow: hidden;
/* important */
margin-left: -40px;
margin-top: -16px;
}
#s3sliderContent
{
width: 500px;
/* important to be same as image width or wider */
position: absolute;
/* important */
top: 0;
/* important */
margin-left: 0;
/* important */;
}
.s3sliderImage
{
float: left;
/* important */
position: relative;
/* important */
display: none;
/* important */;
}
.s3sliderImage span
{
position: absolute;
/* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 474px;
background-color: #000;
filter: alpha(opacity=70);
/* here you can set the opacity of box with text */
-moz-opacity: 0.7;
/* here you can set the opacity of box with text */
-khtml-opacity: 0.7;
/* here you can set the opacity of box with text */
opacity: 0.7;
/* here you can set the opacity of box with text */
color: #fff;
display: none;
/* important */
top: 0;
/*
if you put top: 0; -> the box with text will be shown
at the top of the image
if you put bottom: 0; -> the box with text will be shown
at the bottom of the image
*/;
}
.clear
{
clear: both;
}
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="jquery/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Benčić Tartufi</title>
</head>
<body>
<div class="buttonholder">
<p style="float:left; margin-right:15px;">Kontakt / Contact</p>
<p style="float:left; margin-right:15px;">O nama / About Us</p>
<p>Proizvodi / Products</p>
<img src="Images/Separator.png" width="600px" height="77" style="margin-left:-70px; position:relative; bottom:30px;;" />
</div>
<div id="dog">
<img src="Images/dog.png" />
</div>
<div class="header">
</div>
<div class="logo">
<img src="Images/logo.png" />
</div>
<div id="textholder">
<p>"Iz Motovunske šume na Vaš stol, <br />
najbolji okus prirode, Tartuf."
</p>
<p>"From the Motovun woods to Your table,<br />
best taste of nature, the Truffle."
</p>
<img src="Images/Separator.png" width="550px" height="77px" style="position:relative; bottom:30px; margin-left:-75px;" />
</div>
<div id="galleryholder">
<!-- GALERIJA! DODAVAT SLIKE U IMG SRC SA SPANOM! -->
<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="Slike tartufa/1.jpg">
<span>Hello Truffles</span>
</li>
<li class="s3sliderImage">
<img src="Slike tartufa/2.jpg">
<span>Hello Truffles</span>
</li>
<!--Kopiraj si za novu sliku!! -->
<li class="s3sliderImage">
<img src="#">
<span>Hello Truffles</span>
</li>
<!--End-->
<div class="clear s3sliderImage"></div>
</ul>
</div>
<!--KRAJ GALERIJE!-->
<!--gallery holder div close-->
</div>
<!--end!-->
<script>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 3600
});
});
</script>
</body>
</html>
For what i see here you are mixing % and px in your widths and heights when you use % it will make the design fluid according the the width of the browser so remove all % and replace them with px. also I would recommend wrapping the your code in a
<div class="wrap">
.wrap{
marging: 0 auto;
width: 960px;
}
It is very hard for us to help you with this code, since we cant view the images you are using. if you upload it to a website then it would be a lot easier.