I have to modify this script so that the four images contained, keep the properties of height and width in case of responsive effect. At the moment they are being crushed.
Clearly, also keeping the zoom effect inside the div. I've tried everything but I can't. Some idea?
I have really tried everything but I can't understand.
online link:
.module_a {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_1.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_b {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_2.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_c {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_3.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_d {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_4.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.cap p {
font-size: 26px ;
font-weight: 200 ;
color: white;
font-family: MorganSansLining;
margin: 0 auto ;
text-align: center ;
bottom: 100px ;
margin-top: 100px ;
}
.zoom {
-moz-transition: all 0.5s ;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.zoom:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1) ;
}
.playBtn {
position: relative;
background-image:url("https://www.woodyvalley.it/prova/images/pre_1.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
top: -90px;
left: 0px;
z-index:999;
}
.playBtn:hover {
position: relative;
background-image:url("https://www.woodyvalley.it/prova/images/post_1.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
top: -90px;
left: 0px;
z-index:999;
}
.container_img {
float: left;
overflow: hidden;
width: 24.99999%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container_img responsive">
<a href="vani-light-2.html"><div class="module_a cap zoom" >
<p>TEXT FOR TEST 1</p>
</div></a>
</div>
<div class="container_img responsive">
<a href="gto-light-2.html"><div class="module_b cap zoom" >
<p>TEXT FOR TEST 2</p>
</div></a>
</div>
<div class="container_img responsive">
<a href="vani-3.html"><div class="module_c cap zoom" >
<p>TEXT FOR TEST 3</p>
</div></a>
</div>
<div class="container_img responsive">
<a target="_blank" href="https://youtu.be/ZJp9RcF5FmI"><div class="module_d cap zoom">
<p>TEXT FOR TEST 4</p>
<p class="playBtn"></p>
</div></a>
</div>
<br style="clear: both;">
Related
I want to create a scrolling image collage with image bubbles.
I want Like This
I finished making the design, but I can't understand how can I slide those pictures continuously. I mean auto carousel slider. Please Help me.
var frst_Img = document.querySelector(".image1");
var scnd_Img = document.querySelector(".image2");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(-8px);
}
100%{
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.1),
0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(8px);
}
100%{
transform: translateY(0px);
}
}
<div id="container">
<div class="wrapper">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
Consider the following. This is not the only way to do this, yet it may help lead you to a solution.
$(function() {
var speed = 1;
var canvas = $(".wrapper");
function float(el) {
var left = $(el).position().left;
var top = $(el).position().top;
left -= (speed + Math.random());
top = top + (Math.random() < 0.5 ? -1 : 1);
if (left < (0 - $(el).width())) {
// Element is offscreen
$(el).css("left", "115%");
} else {
$(el).animate({
left: left,
top: top
});
}
}
var timer = setInterval(function() {
$("[class^='image']").each(function() {
float(this);
});
}, 600);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
}
div#container {
width: 1150px;
padding: 5px;
margin: 15px auto;
display: block;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
}
.wrapper {
width: 100%;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
div[class^='row'] {
width: 100%;
height: 175px;
position: relative;
}
div[class^='image'] {
position: absolute;
top: 0%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
}
div.large {
width: 150px;
height: 150px;
}
.image1 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=1);
}
.image2 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=2);
}
.image3 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=3);
}
.image4 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=4);
}
.image5 {
left: 0%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=5);
}
.image6 {
left: 33%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=6);
}
.image7 {
left: 66%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=7);
}
.image8 {
left: 100%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=8);
}
.image9 {
left: 15%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=9);
}
.image10 {
left: 50%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=10);
}
.image11 {
left: 85%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=11);
}
.image12 {
left: 115%;
background-image: url(https://dummyimage.com/175/ccc/000.png&text=12);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div class="wrapper">
<div class="row-1">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
<div class="image4"></div>
</div>
<div class="row-2">
<div class="image5 large"></div>
<div class="image6 large"></div>
<div class="image7 large"></div>
<div class="image8 large"></div>
</div>
<div class="row-3">
<div class="image9"></div>
<div class="image10"></div>
<div class="image11"></div>
<div class="image12"></div>
</div>
</div>
</div>
Instead of using CSS to animate the movement, we use jQuery Animate.
If you are able to set up the HTML you won't need to use Javascript.
A simple way is to make sure that you have enough copies of the material you want to scroll and that half of these will at least cover the largest screen size you need to support.
The built-in width of 1150 is too narrow for some common screens, so this snippet has 4 copies, moves them to the left by 50%, then back to the initial position, that way it looks continuous and you can leave CSS (and hopefully the device's GPU) to keep the animation going.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: aliceblue;
overflow: hidden;
}
div#container {
width: calc(1150px * 4);
display: flex;
overflow: hidden;
border: 2px solid black;
background: white;
box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
animation: moveleft 60s infinite linear;
}
.block1,
.block2 {
display: flex;
}
.wrapper {
background: ;
display: inline-block;
rwidth: 100vw;
width: 1150px;
box-shadow: rgb(50 50 93 / 7%) 0px 30px 60px -12px inset, rgb(0 0 0 / 6%) 0px 18px 36px -18px inset;
}
#keyframes moveleft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.images {
width: 100%;
height: 175px;
position: relative;
}
.images2 {
width: 100%;
height: 175px;
display: block;
position: relative;
}
.images3 {
width: 100%;
display: block;
height: 175px;
position: relative;
}
.image1 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/1.jfif);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image2 {
position: absolute;
top: 0%;
left: 50%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/2.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
.image3 {
position: absolute;
top: 0%;
left: 85%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/3.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown 5s infinite;
}
#keyframes upDown {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
.image4 {
position: absolute;
top: 0%;
left: 0%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/4.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image5 {
position: absolute;
top: 0%;
left: 33%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/5.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 6s infinite;
}
.image6 {
position: absolute;
top: 0%;
left: 70%;
width: 150px;
height: 150px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/6.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown2 5s infinite;
}
#keyframes upDown2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-8px);
}
100% {
transform: translateY(0px);
}
}
.image7 {
position: absolute;
top: 0%;
left: 16%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/7.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image8 {
position: absolute;
top: 0%;
left: 54%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/8.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
.image9 {
position: absolute;
top: 0%;
left: 88%;
width: 125px;
height: 125px;
margin: 10px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.1);
border-radius: 50%;
padding: 5px;
border: 1px solid #cdcdcd;
display: inline-block;
background-image: url(pictures/9.jpg);
background-size: cover;
background-repeat: no-repeat;
animation: upDown3 5s infinite;
}
#keyframes upDown3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(8px);
}
100% {
transform: translateY(0px);
}
}
<div id="container">
<div class="block1">
<div class="wrapper" style="/*background: cyan;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: lime;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
<div class="block2">
<div class="wrapper" style="/*background: mauve;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
<div class="wrapper" style="/*background: yellow;*/">
<div class="images">
<div class="image1"></div>
<div class="image2"></div>
<div class="image3"></div>
</div>
<div class="images2">
<div class="image4"></div>
<div class="image5"></div>
<div class="image6"></div>
</div>
<div class="images3">
<div class="image7"></div>
<div class="image8"></div>
<div class="image9"></div>
</div>
</div>
</div>
</div>
Hi Here I'm trying to add a speech bubble at the bottom left I used clip-path but the problem is I unable to adjust the pixels properly to look clear and exactly what I want. Can anyone suggest to me how to achieve it and any other alternate way to do it?
My code
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 147px!important;
height: auto;
background: transparent;
border: 4px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
}
.tolltip:after {
content: "";
position: absolute;
left: -4px;
bottom: -38px;
width: 13px;
height: 72px;
clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
background: white;
}
.tolltip:before {
content: "";
position: absolute;
left: 8px;
right: 0px;
bottom: 0;
border-bottom: 4px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>
Trying to achieve this
Here is a different idea:
.tolltip {
width: 147px;
margin: auto;
position: relative;
padding: 10px;
}
.tolltip:before,
.tolltip:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border: 5px solid #fff;
}
.tolltip:before {
top: 0;
right: 0;
border-radius: 15px 15px 15px 0;
clip-path: polygon(0 0, 100% 0, 100% 100%,
25px 100%, /* 25px = after width + border width */
25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
0 calc(100% - 10px),
0 100%);
}
.tolltip:after {
top: 50%;
width: 20px; /* adjust this */
border-top: 0;
border-right: 0;
transform-origin: right;
transform: skewY(-40deg); /* add this */
}
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="tolltip">
<h3>content</h3>
</div>
Is it possible to hide short part of div which is inside the container but show another left part overflow.
what I'm saying is that you can simply set the overflow to hidden to hide everything that overflow from particular in that case what I want is the reverse of that.
code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -6px;
width: 13px;
height: 13px;
transform: rotate(45deg);
background: rgba(230, 230, 230, .1);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>
As you can see in the above snippet on the right side of div.magnifier there is div.inside
which I want to show only the outside part looks like an arrow but you see that all parts of that div is being shown.
I know that the above issue is unusual when there is no opacity applied but in my case I want it and also the issue is not causing by the inset on box-shadow.
And if there is any different way that I can do it I'll appreciate that.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -15px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
clip-path: polygon(0 0, 50% 50%, 50% 50%, 0% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>
You can use clip-path function to achieve the same.
i tried these values and got what i suppose you need.
Add this in inside class.
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -8px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
transform: rotate(45deg);
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>
I have been working on one project in which i have to style a border of a div inverted to achieve this i can only use css and js i cannot use any plugins.
I have gone through several online posts and similar looking questions on stack but couldnt really find what i want , I am attaching a for reference as well as a fiddle of what i have tried so far.
.outer {
overflow: hidden;
}
.inner {
border: 1px solid #888;
}
.inner i {
width: 40px;
height: 40px;
border: 1px solid #888;
border-radius: 50%;
background-color: #fff;
}
.inner .top {
margin-top: -20px;
}
.inner .bottom {
margin-top: -20px;
margin-bottom: -22px;
}
.inner .left {
float: left;
margin-left: -20px;
}
.inner .right {
float: right;
margin-right: -20px;
}
.content {
min-height: 80px;
}
<div class="outer">
<div class="inner">
<i class="top left"></i>
<i class="top right"></i>
<div class="content"></div>
<i class="bottom right"></i>
<i class="bottom left"></i>
</div>
</div>
Am sure This will help you
Demo: http://jsfiddle.net/mxehp3sh/2/
HTML
<div id="a" class="circle-border">B</div>
CSS
body{background:yellow;}
.circle-border {margin:10px;
display: inline-block;
position: relative;
height: 100px;
text-align: center;
line-height: 100px;
vertical-align: middle;
}
#a {
width: 90%;
border-left: none;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
background-image: -moz-radial-gradient(
100% 50%,
circle closest-corner,
transparent 0,
transparent 55px,
transparent 56px,
grey 57px
);
background-image: -webkit-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: -ms-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: -o-radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
background-image: radial-gradient(100% 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, transparent 56px, grey 57px);
}
I'm trying to keep my page from having to horizontally scroll.
When I add my navbar and header div to my page, everything works fine. However, when I add my content div it forces my page to scroll left and right. It's no wider than my header so why is this happening?
Here is my code:
body {
min-width: 1024px;
min-height: 700px;
max-width: 1920px;
max-height: 1080px;
width: 100%;
height: 100%;
margin: 0 auto;
background: url(/style/images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
<!-- FOR IE -->
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
.overlay {
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
-moz-box-shadow: inset 0 0 5px rgba(68,105,244,.45);
box-shadow: inset 0 0 5px rgba(68,105,244,.45);
}
.divstyle {
background-color: rgba(247,247,247,.9);
-webkit-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
box-shadow: 0px 5px 50px 0px rgba(0,0,0,0.75);
}
#navbar {
height: 50px;
min-width: 1600px;
width: 100%;
margin-bottom: 50px;
}
#header {
width: 1000px;
height: 200px;
margin: 0 auto;
border-radius: 5px;
}
#content {
width: 1000px;
min-height: 500px;
margin: 0 auto;
margin-top: 25px;
border-radius: 5px;
}
Here's my html:
<div id="navbar" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="header" class="divstyle">
<div class="overlay">
</div>
</div>
<div id="content" class="divstyle">
<div class="overlay">
</div>
</div>
http://jsfiddle.net/9mRHT/
It is because of min-width: 1600px; present in
#navbar {
height: 50px;
/* min-width: 1600px; */
width: 100%;
margin-bottom: 50px;
}
This will remove the horizontal scrollbar