This is my code
CSS
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
}
#box1 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 250px;
text-align: justify;
-webkit-transition: all .75s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
#-webkit-keyframes myFirst {
0% {
right: 300px;
top: 160px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
:;
right: 300px;
top: 200px;
opacity: 1;
}
}
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
}
.littlebox1-sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: #D0D0D0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: background .25s ease-in-out;
}
#bothcontainer:hover ~ #box1 {
-webkit-transition: all 0s;
background: #909090;
:;
right: 300px;
top: 200px;
-webkit-animation: myFirst .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
#bothcontainer:hover .littlebox1-sentence {
background: #909090
}
#bothcontainer:hover .triangle {
border-right: 25px solid #909090
}
.triangle {
position: relative;
width: 0;
height: 0;
border-right: 25px solid #D0D0D0;
border-top: 27px solid transparent;
border-bottom: 24px solid transparent;
right: 184px;
-webkit-transition: border-right .25s ease-in-out;
}
HTML
<body dir="rtl">
<div id="page">
<div id="bothcontainer">
<div id="littlebox1" class="littlebox1-sentence">put your mouse here</div>
<div id="littlebox1" class="triangle"></div>
</div>
<div id="box1"></div>
</div>
I want to add a border to the triangle, to .littlebox1-sentence.
The border will not change its color.
Here is a fiddle
I have come closer to finding the solution, but it still is not where I want it.
Fiddle
I'm not exactly sure what effect you're after, but I'd have a look at -webkit-filter. It allows you to add a shadow to "this element and any children it has, regardless of shape".
#littlebox1 {
top: 200px;
position: absolute;
display: inline-block;
-webkit-filter: drop-shadow(green -10px 0 10px);
}
http://jsfiddle.net/DyxA4/
Another solution: skip the border-based triangle and use three divs instead:
<div class="sign">
<div class="arrow"><div></div></div>
<p>Lorem ipsum dolor</p>
</div>
Basically, we use ".arrow div" to create the triangle, and ".arrow" the cut off the bits we don't need:
http://jsfiddle.net/k5J6M/1/
The triangle IS the border. You can't do what you're asking. Just make an image.
Related
I am trying to build a parallelogram background that only appears on hover in a menu item. For the shape, I am using :before and :after pseudo-elements, however I cannot apply the same transition effect on them. Does anyone knows what could I do to solve this problem?
Here is the code until the moment:
div {
float:left;
background-color:#fff;
margin: 20px;
transition:.5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background-repeat: no-repeat;
background: #fff;
position: relative;
transition:.5s;
}
.testClass:hover {
background: gold;
transition:.5s;
}
.testClass:hover:before {
content: '';
position: absolute;
top:0;
left:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 29px 15px;
border-color: transparent transparent gold transparent;
}
.testClass:hover:after {
content: '';
position: absolute;
top:0;
right:-15px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 30px 15px 0 0;
border-color: gold transparent transparent transparent;
}
<div >
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>
What about an easier way with only one element to create the shape:
div {
float: left;
margin: 20px;
transition: .5s;
}
.testClass {
margin-top: 0px;
margin-left: 0px;
padding: 5px 10px;
display: block;
background: #fff;
position: relative;
transition: .5s;
z-index: 0;
}
.testClass:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: -10px;
right: -10px;
bottom: 0;
opacity: 0;
background: gold;
transform: skew(-20deg);
transition: .5s;
}
.testClass:hover::before {
opacity: 1;
}
<div>
<div class="testClass">HOME</div>
<div class="testClass">ABOUT US</div>
<div class="testClass">CONTACT</div>
<div class="testClass">LOGIN</div>
<div class="testClass">SERVICES</div>
</div>
Current Situation Image
Here is what I have got. But I want that rectangle facebook image behind the red region (currently it is just behind the text 'Please')
#mlnk{
text-decoration:none;
position:relative;
top:40%;
left:0%;
color: #b5c5d6;
}
.container-corner-img{ /* **THIS IS TO BE PUSHED BACK** */
height: 40%; width: 70%;
position: absolute;
top: 5px; left:-75px;
}
.container{
width:50%;
height:30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding:100px;
border-radius:12px;
position: relative;
font-family: sans-serif;
}
h1{ /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
transition: 0.4s ease;
background-color: red;
margin-top: 0;
}
img{
height: 80%;
width: 50%;
}
<div class="container">
<div class="container-corner-img">
<img src="fbminimal.png">
</div>
<h1>
<a id="mlnk" href = "#link"> Please login to your facebook account first</a>
</h1>
</div>
I have commented the css definitions in CAPS that needs to be focused according to me.
To bring the heading to the front, you have to set z-index to a larger value. To be able to use z-index on an element it needs to have a different position than static. So use relative. Moreover, do not use the center-tag since it is deprecated. The layout should be controlled by CSS only.
#mlnk {
text-decoration: none;
position: relative;
top: 40%;
left: 0%;
color: #b5c5d6;
}
h3 {
color: midnightblue;
padding: 4px;
box-shadow: 0 2px 4px 0 #38434e;
background: #3c64ad;
}
.container-corner-img {
/* **THIS IS TO BE PUSHED BACK** */
height: 40%;
width: 70%;
position: absolute;
top: 5px;
left: -75px;
/* opacity: 0.4; */
}
.container {
width: 50%;
height: 30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding: 100px;
border-radius: 12px;
position: relative;
font-family: sans-serif;
/* z-index: 1; */
margin: 0 auto;
}
h1 {
/* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s ease;
background-color: red;
/* rgba(0,0,80,0.2); */
margin-top: 0;
/* Add this */
position: relative;
z-index: 1000;
}
h1:hover {
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
transition: 0.4s ease;
}
img {
height: 80%;
width: 50%;
/* z-index: 0; */
}
.center {
text-align: center;
margin: 0 auto;
}
<div class="center">
<div class="container">
<div class="container-corner-img">
<img src="https://stocknews.com/wp-content/uploads/2017/07/facebook-fb-alternate.jpg">
</div>
<h1>
<a id="mlnk" href="#link"> Please login to your facebook account first</a>
</h1>
<h3>You need to Log In</h3>
</div>
</div>
I wanna make info box with this design.
This design is important to me. When mouse is over the circle, I need some animation and transform design to this...
jsFiddle Example :
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
But I don't know how to hide the circle.
Is there any solution how to make and hide that circle with border and shadow ?
Try use transition and opacity for wrapper:after
You would want to transparent pseudo element after on hover and target it with .wrapper:hover:after.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
opacity:1;
transition: all 0.5s forwards ; /*added */
}
.wrapper:hover:after{
opacity:0 ; /*added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
also if you want some animation on hover out you can use bellow code:
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
transition: 0.4s ease;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask:hover {
clip-path: circle(100% at 50% 50%);
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
transition: all 0.5s ease-in ;
}
.wrapper:hover:after{
opacity:0 ;
transition: all 0.5s forwards ; /* added */
}
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
You can just unset the border and box-shadow on :hover and transition that change, too, if you want.
.wrapper{
width:400px;
height:200px;
background: white;
position: relative;
}
.mask {
width: 100%;
height: 100%;
background: green;
background-size: cover;
clip-path: circle(80px at 50% 50%);
position: relative;
}
.mask, .wrapper:after {
transition: 0.4s ease;
}
.wrapper:hover .mask {
clip-path: circle(100% at 50% 50%);
}
.wrapper:hover:after {
border: 0;
box-shadow: none;
}
.wrapper:after {
content: ' ';
display: block;
position: relative;
width: 160px;
height: 160px;
top: calc(-50% - 83px);
left: calc(50% - 83px);
border-radius: 50%;
background:transparent;
border: 3px solid #fff;
box-shadow: 0px 0px 6px #aaa;
pointer-events: none;
}
<br/>
<br/>
<div class="wrapper">
<div id="map-canvas" class="mask">
</div>
</div>
I have a pure HTML5/CSS modal window inside Razor View UserPanel in ASP.NET MVC application. I can activate this modal window by clicking a link: <p>Activate Modal</p>the problem is I want it to be displayed always when visiting /UserPanel page and don't have to click on this button.
The short html and then full css for the modal(it works - > the modal shows up only after clicking the button):
html:
<div class="container">
<p>Activate Modal</p>
</div>
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
css:
<style>
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 0;
position: absolute;
top: -50%;
visibility: hidden;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target {
opacity: 1;
top: 50%;
visibility: visible;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
</style>
Question: How to always show modal when visiting this page?
Change your HTML to this (we simply target the close button):
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
</div>
and now the CSS to this:
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 1;
position: absolute;
top: 50%;
visibility: visible;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#modal:target{
opacity: 0;
top: -50%;
visibility: hidden;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
we simply make the modal show by default, then hide it on click. Of course, if you want it always visible, just delete the close button. See fiddle here
i hope ths code will help
<div class="container">
<div id="modal">
<div class="modal-content">
<div class="header">
<h2>Notification</h2>
</div>
<div class="copy">
<p>There is new Announcment to read!</p>
</div>
<div class="cf footer">
Close
</div>
</div>
<div class="overlay"></div>
#modal {
left: 50%;
margin: -250px 0 0 -40%;
opacity: 0;
position: absolute;
top: -50%;
visibility: hidden;
width: 80%;
box-shadow: 0 3px 7px rgba(0,0,0,.25);
box-sizing: border-box;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
opacity: 1;
top: 50%;
visibility: visible;
}
#modal .header, #modal .footer {
border-bottom: 1px solid #e7e7e7;
border-radius: 5px 5px 0 0;
}
#modal .footer {
border: none;
border-top: 1px solid #e7e7e7;
border-radius: 0 0 5px 5px;
}
#modal h2 {
margin: 0;
}
#modal .btn {
float: right;
}
#modal .copy, #modal .header, #modal .footer {
padding: 15px;
}
.modal-content {
background: #f7f7f7;
position: relative;
z-index: 20;
border-radius: 5px;
}
#modal .copy {
background: #fff;
}
#modal .overlay {
background-color: #000;
background: rgba(0,0,0,.5);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
I want to make only one rounded corner for a triangle but I'm unable to make it.
Here is my code:
.arrow-left {
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-right: 80px solid blue;
}
<div class="arrow-left"></div>
I need the corner pointing left to be rounded as shown in this image :
I know this is a little hacky, but I don't think there is an easy way to do this with a single class.
All I've done is rotated a box 45 degrees with border-radius:10px and then contained it in another div with width set to the desired width of your arrow and overflow:hidden so that everything that spills over is invisible.
.arrow-left {
position: absolute;
width: 100px;
height: 100px;
left: 20px;
background: black;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-radius: 10px;
}
.cover {
position: absolute;
height: 100px;
width: 40px;
overflow: hidden;
}
<div class="cover">
<div class="arrow-left"></div>
</div>
You can make a responsive triangle with one rounded corner with at least 2 approaches :
With CSS:
With one divand a pseudo element and:
absolute positioning
the padding technique to keep the triangle aspect ratio
2d transforms
overflow:hidden;
the transform technique to make the triangle
.arrow-left {
position: relative;
width: 15%;
padding-bottom:15%;
border-radius: 10px;
overflow: hidden;
transform-origin:100% 0;
transform: rotate(-45deg);
}
.arrow-left:after {
content: "";
position: absolute;
top: 0; right:8px;
width:100%; height:141%;
transform-origin:inherit;
transform: rotate(45deg);
background:#000;
}
<div class="arrow-left"></div>
Note that you need to add the vendor prefixes to the transform and transform-origin properties (more info on canIuse)
With inline SVG:
This example uses one path element for the triangle with a bezier curve command for the rounded corner (Q0 5 0.8 4.2 in the d attribute):
svg{
display:block;
width:10%;
}
<svg viewbox="0 0 5 10">
<path d="M5 0 V10 L0.8 5.8 Q0 5 0.8 4.2z" />
</svg>
You can try this and modify according to your needs.
http://jsfiddle.net/K44mE/947/
#player {
margin: 32px;
position: relative;
width: 400px;
height: 250px;
background-color: #222;
}
#inner {
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
background-color: silver;
width: 100px;
height: 100px;
top: 20px;
left: -60px;
position: relative;
-moz-border-radius: 20px;
border-radius: 20px;
}
#outer {
position: absolute;
top: 50px;
left: 165px;
width: 70px;
height: 140px;
overflow: hidden;
}
<div id="player">
<div id="outer">
<div id="inner"> </div>
</div>
</div>
use overflow: hidden;
.corner {
position: absolute;
border-radius: 4px;
overflow: hidden;
top: 0em;
right: 0em;
margin: 0em;
padding: 0em;
text-align: center;
border-color: #E8E8E8;
width: 4em;
height: 4em;
z-index: 1;
-webkit-transition: border-color 0.1s ease;
transition: border-color 0.1s ease;
}
.corner:after {
position: absolute;
content: "";
right: 0em;
top: 0em;
z-index: -1;
width: 0em;
height: 0em;
background-color: transparent !important;
border-top: 0em solid transparent;
border-right: 4em solid transparent;
border-bottom: 4em solid transparent;
border-left: 0em solid transparent;
border-right-color: inherit;
-webkit-transition: border-color 0.1s ease;
transition: border-color 0.1s ease;
}
to your code to add this
border-radius:10px