I am using easy modal plugin for my wordpress site. The modal works fine but there is only one issue that the height of the modal sets itself to the end scroll of the page. The width is set to 80% which works fine but the height:auto property is not working fine at all. Kindly let me know how can i fix this issue? . If in the following CSS I hard code the height then the trick works but all I am trying is to achieve the height:auto property.
.modal {
background-color: #FFFFFF;
border: 1px solid #666666;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
display: none;
font-size: 16px;
height: auto !important;
left: 50%;
margin-left: -40%;
overflow: visible;
padding: 1.25em;
position: absolute;
top: 100px;
transform: scale(1, 1);
transform-origin: 0 50% 0;
visibility: hidden;
width: 80%;
z-index: 999;
}
You need to change the font-size:16px to default font-size:14px, it will resolve the issue.
Related
Ok, so in HTML I have one div tag with a before and after pseudo elements. This is my CSS:
.divClass{
background: #41423D;
height:30px;
}
.divClass:before{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent #41423D #41423D transparent;
border-style:solid;
position: absolute;
top: 0;
left: -14px;
}
.divClass:after{
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-width :15px 7px 15px 7px;
border-color: transparent transparent #41423D #41423D;
border-style:solid;
position: absolute;
top: 0;
right: -14px;
}
So, in design it becomes like this:
___
/ \
Now all I need is a shadow on the before and after pseudo elements which are the 2 triangles on either side of the div. The pseudo elements have 0 width and height so using box-shadow is a little tricky.
I need the shadow along the triangle. So, what can I do?
You can use unicode character : ▲ to make the triangles.
Apply a text shadow on it.
If the shape of the triangle is not what you want you can adjust it with transform: rotate(); or transform: skewX(); or both.
It's a bit tricky and not perfect but it can works :
span {
display: inline-block;
font-size: 70px;
transform: skewX(29.5deg);
color: red;
text-shadow: 2px 2px 4px gray;
}
<span>▲</span>
There are some other possibilities, all describe on a CSS Tricks post, so check it if you want :
https://css-tricks.com/triangle-with-shadow/
If think you can check filter: drop-shadow() too. In case you do not need a support for all the browsers it may works for you...
edit:
According to the css tricks post, can't you do that ?
.triangle-with-shadow {
transform: rotate(-45deg);
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 20px 10px -17px rgba(0, 0, 0, 0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg); /* Prefixes... */
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5);
}
<div class="triangle-with-shadow"></div>
Another possibility if you just want the shape that you describe is to use the perspective :
.shape {
background: #41423D;
width: 150px;
height: 150px;
margin: 20px auto;
transform-origin:50% 100%;
transform:perspective(100px) rotateX(30deg);
box-shadow: 2px 2px 15px #41423D;
}
<div class="shape"></div>
I have an issue with my Sticky Footer at the bottom.
It works fine on all browser but not on Safari...why?? :(
#main{
background-color: #f0f0f0;
box-shadow: 0px 20px 30px -20px rgba(0, 0, 0, 0.8);
z-index: 1;
position: relative;
margin-bottom: 250px;
}
footer {
height: 250px;
z-index: -100;
position: fixed;
bottom: 0px;
}
Thanks! ;)
I have fixed it!
Just add this code... ;)
html, body{
min-height: 100%;
height: auto !important;
height: 100%;
}
Thanks anyway.
I want to add box shadow to left and right side of a div , here I am attaching a image for that, I don't know how to do this, can somebody help me please? please notice that shadow should be to the point mark on left and right.
body {
background-color: red;
}
.boxWrapper {
height: 100%;
overflow: hidden;
margin: 30px auto;
width: 500px;
padding: 0 60px;
}
.box {
position: relative;
border-radius: 3px;
padding: 20px;
min-height: 300px;
background-color: #fff;
}
.box:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(-8deg);
left: 20px;
background-color: transparent;
box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3);
}
.box:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(8deg);
right: 20px;
background-color: transparent;
box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3);
}
<div class="boxWrapper">
<div class="box">
box
</div>
</div>
So this is definitely a neat question. I've played around and was able to at least come up with a stepping stone to the right solution. I've been doing it with the box-shadow method that has been mentioned, but have added it to both an :after and :before pseudo-selector.
Then, I've rotated both these selectors 8 degrees (just to mimic your provided image) and found that it was still showing some unwanted shadow both above the element and below the element.
To solve that, I wrapped the box with a box wrapper thats sole purpose was to define the size of the box as well as hide anything overflowing on the tops and bottoms.
It will definitely need to be adapted to how you need it, as it kinda feels hacky. But I think this provides some ideas on how to approach the problem.
I've created a Codepen so you can see it at work.
http://codepen.io/RyanAaronGreen/pen/Kagdad
Hopefully this gets you what you need. The documentation for the box-shadow property is located Here on MDN.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background-color: pink;
height: 100%;
padding: 10px;
}
.content {
width: 85%;
margin: 0 auto;
box-sizing: border-box;
height: calc(100% - 10px);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3);
background-color: white;
}
<div class="container">
<div class="content">
Hello
</div>
</div>
Use this samples
CSS3 drop shadow
I want to implement a picture shadow as below
I tried to use the following code, but that can't work as I want
Code snippet:
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 30px;
height: 5px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
color: rgba(0, 0, 0, 1);
-o-text-overflow: clip;
text-overflow: clip;
background: #1abc9c;
-webkit-box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
box-shadow: 0 100px 4px -2px rgba(15, 13, 13, 0.53);
-webkit-transform: scaleX(5);
transform: scaleX(5);
-webkit-transform-origin: 0 50% 0;
transform-origin: 0 50% 0;
}
<div class="oval"></div>
I want to put the HTML code below the picture if the CSS code works well.
Another method to achieve this would be to make use of a pseudo-element with CSS transform. In the below snippet, the :after pseudo-element is rotated in X-axis by close to 90deg (but not by equal to 90deg) to give it an oval like appearance. Then by adding a radial-gradient background and box-shadow, we can get an appearance close to the image in the picture.
One advantage of this approach is that the shadow that is produced is responsive and so it can adapt to change in container/image sizes.
.oval{
position: relative;
height: 200px;
width: 200px;
border: 8px solid red;
border-radius: 50%;
}
.oval img{
border-radius: 50%;
}
.oval:after{
position: absolute;
content: '';
height: 100%;
width: calc(100% - 40px); /* to offset for the shadow */
top: 25%;
left: 20px; /* to offset for the shadow spread */
border-radius: 50%;
backface-visibility: hidden;
transform-origin: 50% bottom;
transform: rotateX(85deg);
background: radial-gradient(ellipse at center, rgba(216,216,216, 0.5), rgba(248,248,248,0.1));
box-shadow: 0px 0px 20px 20px rgba(248,248,248,0.5);
}
/* Just for demo */
.oval#oval2{ height: 300px; width: 300px; }
div{ float: left; }
<div class="oval">
<img src='http://lorempixel.com/200/200/nature/1' />
</div>
<div class="oval" id="oval2">
<img src='http://lorempixel.com/300/300/nature/1' />
</div>
You could achieve this quite easily if you're able to wrap the <img /> element in a container tag such as a <div>. By using the :after pseudo-selector on the parent div, you can achieve a similar approach using box-shadow.
For example, assuming you have the following markup:
You may add the following CSS definitions:
.image-round {
border: 4px solid red;
border-radius: 50%;
}
.image-shadow {
display: inline-block;
position: relative;
}
.image-shadow:after {
display: block;
content: '';
position: absolute;
bottom: -30px;
height: 10px;
right: 5px;
left: 5px;
border-radius: 50%;
background: #ccc;
box-shadow: 0 0 10px 10px #ccc;
}
Of course, you can modify the left and right properties of the :after pseudo-element to achieve a better look.
jsFiddle Demo
I am trying to use a background image on an li-element to indicate the current tab being selected. The image is meant to overlap the li-element to show half-borders on top and bottom of the li-element and these borders turning up and down at the side of the tab panel.
The problem is that the image does not show up, even though it is clearly being found (according to the dev tool). If I set a background color or a frame around the div containing the background, that shows correctly and with the right dimensions. Here is my current code:
<ul class="ulTabSelect">
<li>Character<div class="tabLiBG"></div></li>
<li>Skills<div class="tabLiBG"></div></li>
<li>Equipment<div class="tabLiBG"></div></li>
</ul>
And the css:
ul.ulTabSelect {
font: 16px Verdana,sans-serif;
left: 0;
margin-top: 200px;
top: 550px;
width: 135px;
}
ul.ulTabSelect a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
color: #9F9270;
display: block;
font: bold 1em sans-serif;
padding: 5px 10px;
text-align: right;
text-decoration: none;
}
ul.ulTabSelect a:hover {
color: #FFFFCC;
}
ul.ulTabSelect li {
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 0.1em solid rgba(0, 0, 0, 0.9);
margin-bottom: 2px;
}
.ui-state-active .tabLiBG {
position: absolute;
display: block;
top: -36px;
left: 110px;
width: 45px;
height: 84px;
background-image: url("/img/liSelect.png");
background-repeat: no-repeat;
background-position: 90px -27px;
background-color: transparent;
opacity: 1.0;
z-index: 3;
}
.tabLiBG {
display: none;
}
You can also see this in action at www.esobuild.com where it is the main tab selector to the left. Kinda run out of ideas here what to try to get it working.
It works ok if you set
background-position: -17px 11px;
or some value around that
I couldn't find the class ui-state-active in your html. That could be the issue.