so I have circled divs (with border-radius) and each one is connected with a line. Problem is that they are semi-transparent, and they're connected from the center of the div, so you can see a the line through the div. I could make the div opaque, but I wan't to show the background. So, is there a way of hiding specific elements that are behind a div, but show the background of the page? Even if it's using js/jquery.
Here's my simulated situation (in my code lines generate automatically):
https://jsfiddle.net/muud6rqf/2/
body{
background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed;
background-size: cover;
}
.circle{
border: 2px solid red;
width: 36px;
height: 36px;
border-radius: 100%;
position: absolute;
box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6);
}
.simulated-line{
position: absolute;
width: 181px;
height: 4px;
background: green;
top: 64px;
left: 118px;
transform-origin: 0% 50%;
transform: rotate(25deg);
}
<div class="circle" style="left: 100px; top: 46px"></div>
<div class="circle" style="left: 260px; top: 121px"></div>
<div class="simulated-line"></div>
EDIT: This is what it looks like:
This is how I want it:
Its a little hack with z-index, I don't know if it can be a good solution for you or not but you can have look at snippet.
Add z-index:-1 to .simulated-line so line will goes back to circle.
Add background: inherit; to .circle so background gets filled.
body{
background: url(http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png) no-repeat center center fixed;
background-size: cover;
background-color: #000;
}
.circle{
border: 2px solid red;
width: 36px;
height: 36px;
border-radius: 100%;
position: absolute;
box-shadow: 0 0 8px 2px rgba(255,0,0,0.6), inset 0 0 8px 2px rgba(255,0,0,0.6);
background: inherit;
}
.simulated-line{
position: absolute;
width: 181px;
height: 4px;
background: green;
top: 64px;
left: 118px;
transform-origin: 0% 50%;
transform: rotate(25deg);
z-index: -1;
}
<div class="circle" style="left: 100px; top: 46px"></div>
<div class="circle" style="left: 260px; top: 121px"></div>
<div class="simulated-line"></div>
Related
I'm programming a website where when you go down to "Partners & Sponsors" you get to a menu which you can open by clicking an Image of an Arrow (anchor element), when I click it I want the company logos to flare up a bit (like get a bit bigger for 1s and then go back to default) after pressing the button, also I need the animations to play one after another for like 4 Logos.
so basically I want some images to change their size after a button is pressed and after like 1s I want them to get back to their default size. Below are some code snippets, also I have absolutely no clue about java script so something with only CSS and html would be perfect, thanks in advance.
html:
<div class="pfeilbox"></div>
<a class="DingsFürZertifkateKnopf">
<script>
$("#1").click(function() {
$('EsetLogoUnten').toggleClass('EsetLogoUntenANIMATION');
});// doesnt work
</script>
<img id="1" src="images/pfeilfertch.png" style="position: relative; left:500px; top:-25px; width: 50px; z-index: 64; ">
</a>
<div class="DingsFürZertifkateInhalt">
<div class="dasdingbestimmtdiegrößevondemweißendinglol"></div>
<div class="EsetLogoFürUnten">
<div class="EsetLogoFürUntenText">
<p>text</p>
</div>
</div>
and here is my CSS:
.pfeilbox{
position: relative;
left: 470px;
top: 20px;
display: block;
background-color: rgb(255, 255, 255);
z-index: 42;
width: 150px;
height: 50px;
border: solid black;
border-width: 1px;
border-color: black;
}
.EsetLogoFürUnten{
position: relative;
width: 300px;
height: 123px;
top: -800px;
left: 0px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/Partnerlogo_Gold-small.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoUntenANIMATION{
position: relative;
width: 0px;
height: 123px;
top: -800px;
left: 10000px;
z-index: 334;
margin-bottom: 5px;
background-image: url(images/altaro_vm_backup.png);
background-repeat: no-repeat;
border-radius: 12px;
animation-name: EsetLogoUntenAnimation;
animation-duration: 1s;
}
.EsetLogoFürUntenText{
position: relative;
width: 300px;
height: 130px;
font-size: 1em;
top: 150px;
left: 0px;
z-index: 334;
display: block;
background-color: #ffffff;
border: solid black;
border-width: 1px;
border-color: black;
box-shadow: 5px 5px 2px rgba(47, 52, 57, 0.378);
}
I am trying to achieve the below image with few divs, round background with similar to V-shape ( as shown in image below).
So Far I have tried this but could not achieve as in the image. I have added both before and after psuedo code for it. Any Help will be much Appreciated.
// Want to Achieve this:
//So far I have done this:
<template>
<div>
<div class="markar-container">
<button>
<h1>Pin 4</h1>
<div class="outer-circle">
<div class="inner-circle">
<div class="text">AA</div>
</div>
</div>
</button>
</div>
</div>
</template>
CSS:
<style scoped>
.outer-circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #fff;
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}
.inner-circle {
width: 70px;
height: 70px;
border-radius: 35px;
background: #3ac371;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
position: absolute;
left: 18px;
top: 21px;
font-size: 24px;
color: white;
}
.outer-circle::before {
content: "";
top: 75px;
left: 24px;
border-width: 16px;
border-style: solid;
border-color: transparent #fff transparent transparent;
/* box-shadow: 2px rgba(0, 0, 0, 0.3); */
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
position: absolute;
transform: rotate(-90deg);
}
.dl-outer-circle::after {
/* position: absolute;
content: "";
top: 73px;
left: 30px;
border-width: 10px;
border-style: solid;
border-color: transparent #3ac371 transparent transparent;
transform: rotate(-90deg); */
}
</style>
// and my pin looks like this:
I created a svg for you took a lot of time. Hope it will help
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
.circle::after {
position: absolute;
left: 50%;
bottom: -24px;
transform: translateX(-50%);
content: url("data:image/svg+xml,%3Csvg width='72' height='48' viewBox='0 0 72 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H72V16.7561C70.0823 16.2625 68.0718 16 66 16C52.7451 16 42 26.7452 42 40V48H30V40C30 26.7452 19.2549 16 6 16C3.92822 16 1.91772 16.2625 0 16.7561V0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}
<div class="circle"></div>
How can I place the tooltip centered and directly under the red circle without Javascript? Thank you in advance! :-)
Here is an image of my problem and the marked position where it should be:
My code currently looks like this:
HTML code:
<li>
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
</li>
CSS code:
#ovm-oup_under ul{
text-align: center;
list-style-type: none;
padding: 0;
}
#ovm-oup_under li{
padding: 20px;
margin: 15px;
display: inline-block;
}
.ovm-oup_under_item{
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0,0,0,.2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
top: 0%;
left: 50%;
z-index: 999;
}
One solution would be to combine absolute placement of the tooltip (relative to the parent div), with a translation transformation on the tooltip, which would achieve the required placement:
/* Extracted styling to top of style sheet to show the required additions */
.ovm-oup_tooltip span {
/* Offset the tooltip 50% from left side of parent (div) width
and 100% from top edge of parent height */
left: 50%;
top: 100%;
/* Pull the tooltip back 50% of it's own width, nudge the tool
tip downward 8px to account for arrow point */
transform: translate(-50%, 8px);
}
.ovm-oup_under_item {
/* Allow absolute placement of children (tooltip) */
position: relative;
}
/* Your existing styling starts here */
.ovm-oup_under_item {
width: 96px;
height: 96px;
border-radius: 50%;
box-shadow: 0 0 20px 5px rgba(0, 0, 0, .2);
margin: 5px 5px 35px 5px;
}
.ovm-oup_tooltip {
position: relative;
display: inline;
}
.ovm-oup_tooltip span {
position: absolute;
width: auto;
padding: 3px 15px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 4px;
}
.ovm-oup_tooltip span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -8px;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.ovm-oup_tooltip:hover span {
visibility: visible;
margin: 0;
/* Remove
top: 0%;
*/
left: 50%;
z-index: 999;
}
<a class="ovm-oup_tooltip" href="#">
<div id="ovm-oup_under_item_1" class="ovm-oup_under_item">
<span>Text</span>
<img src="Example_Logo.svg" alt="">
</div>
</a>
The idea here is to use absolute placement of the tooltip (ie the span), to position the top-left corner of that span at the horizontal center, and bottom edge of the parent div. The transform rule is then used to offset the tooltip span relative to it's own dimensions, to achieve the final center/baseline placement.
You can merge the additions above with your existing styling - I extracted the changes to the top of the stylesheet to clarify the additons that were made to achieve the desired result. Hope that helps!
I have apply opacity using 'rgba' on parent div and i don't want to inherit this effect on child div.. How can i restrict rgba style from child element...
i have posted images as well for better assistance.
'http://imgur.com/a/YxipO' = (actual image of my code)
'http://imgur.com/a/7ltDa' = (what i want to do using css or js)
.banner-inner {
background-color: rgba(255,255,255,0.2);
padding: 3%;}
.logo-circle {
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;}
You can use a box shadow, like this
.content {
height: 200px;
width: 300px;
position: relative;
background: url(http://lorempizza.com/500/350/);
background-size: cover;
}
.logo-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
border: 7px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 1000px rgba(255,255,255,0.5);
/* background: rgba(0,0,0,0.5); uncomment if you want a semi transparent
opacity inside circle
*/
}
<div class="content">
<div class="logo-circle"></div>
</div>
You may consider following example approach:
.content {
height: 200px;
width: 200px;
position: relative;
}
.banner-inner {
background-color: rgba(0, 0, 0, 0.2);
padding: 3%;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.logo-circle {
width: 1em;
border: 7px solid #fff;
border-radius: 50%;
padding: 1em;
z-index: 2;
height: 1em;
position: absolute;
top: 50%;
margin-top: -1.5em;
left: 50%;
margin-left: -1.5em;
}
<div class="content">
<div class="banner-inner"></div>
<div class="logo-circle"></div>
</div>
For background in circle use RGBA
.logo-circle {
background: rgba(0, 0, 0, 0.2);
width: 15%;
border: 7px solid #fff;
border-radius: 50%;
padding: 16px;
}
You could use the same picture (as seen in the background) as background in .logo-circle. And set the position of the image like this: background-position: center;
or:
Use a wrapper div for .logo-circle with the same size of the image and set overflow: hidden;. For .logo-circle set a very big shadow, like box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.2);
I have no idea how would i make something like inverted circle in the corners. I have attached picture for better understanding.
Is this even possible to create using CSS3 or perhaps jQuery?
How i would recommend create that shape SVG.
Css solution:
Using a before and after elements that matches the background.
.shape {
position: relative;
width: 400px;
height: 120px;
background-color: cornflowerblue;
text-align: center;
color: white;
line-height: 120px;
}
/*replace with "" if your going to use the code*/
.shape:before {
content: "↙";
font-size: 2.5em;
text-indent: 35%;
line-height: 0%;
position: absolute;
top: calc(100% - 20px);
left: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-right-radius: 15px;
}
.shape:after {
content: "↘";
line-height: 0%;
text-indent: -43%;
font-size: 2.5em;
position: absolute;
top: calc(100% - 20px);
right: 0;
width: 35%;
height: 50%;
background-color: white;
border-top-left-radius: 15px;
}
.shape .extra {
position: absolute;
top: 100%;
background-color: cornflowerblue;
width: 30%;
height: 30%;
left: 35%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
<div class="shape">This is not a problem any more
<div class="extra"></div>
</div>
SVG:
Using the path element and then using the Bezier Curves command.
MDN paths
<svg width="300px" viewbox="0 0 100 60">
<path fill="cornflowerBlue" d="m 0,0
100,0
0,30
-25,0
c-5,0 -5,0 -5,5
v20
c0,5 0,5 -5,5
h-30
c-5,0 -5,0 -5,-5
v-20
c 0,-5 0,-5 -5,-5
h-25z" />
</svg>
The codepen link here (http://codepen.io/techsev/pen/dtAfB/) will teach you how to useadditional divs and shape them to create inverted corners. There is no way currently to invert rounded corners without attaching additional frameworks to a style sheet.
#import "compass/css3";
body {
background-color: #fff;
}
.wrapper {
overflow:hidden;
width:200px;
height:200px;
}
div.inverted-corner {
box-sizing:border-box;
position: relative;
background-color: #3e2a4f;
height: 200px;
width: 200px;
border: solid grey 7px;
}
.top, .bottom {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
}
.top:before, .top:after, .bottom:before, .bottom:after{
content:" ";
position:absolute;
width: 40px;
height: 40px;
background-color: #fff;
border: solid grey 7px;
border-radius: 20px;
}
.top:before {
top:-35px;
left:-35px;
}
.top:after {
top: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
.bottom:before {
bottom:-35px;
left:-35px;
}
.bottom:after {
bottom: -35px;
right: -35px;
box-shadow: inset 1px 1px 1px grey;
}
<div class="wrapper">
<div class="inverted-corner">
<div class="top"> </div>
<h1>Hello, use mult. divs inside a div to do this</h1>
<div class="bottom"> </div>
</div>
</div>