hi iam trying to do this
When i open page i need a popup at the center of page and so i created a div and set its display as 'none' .In document.ready i made it like
$("document").ready(function (){
$(".box").show();
});
so it will show the div.
But i want my div as like a popup like in attached image. how can i make a div like that witha 3d small shading and all??
updated code
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
It giving only bottom and right shadow.
Putting .box { box-shadow:-1px 2px 0.2em grey } in the CSS should make it somehow like the image.
.box {
background-color: #FFF;
width: 180px;
height: 80px;
box-shadow: 1px 1px 5px 1px rgba(255,255,255,0.5); /* x-offset y-offset blur size color */
}
For multi browser support, use prefixes like:
-o-box-shadow
-ms-box-shadow
-moz-box-shadow
-webkit-box-shadow
To get the desired result, play around with the x-offset, y-offset, blur and size properties.
Try something like this:
box-shadow: 0px 1px 4px 1px #777;
You can create it with help of http://www.cssmatic.com/box-shadow :
.scenario-callout-text-right {
width: 400px;
height: 200px;
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.75);
}
Related
I'm trying to give buttons a "press down" animation upon mouse hover and another, smaller press down animation when the user clicks. I currently have the animation working but when the mouse hovers over one button, all buttons are animated. I tried targeting each button individually but didn't have any luck.
I would also like to give each button a set width and height so that they are all the same size. I've tried giving a set width and messed around with the display CSS element but haven't had any success. I can't get the ISSUU embed to show up either, so if there are any suggestions or advice on this as well that would be awesome (Pre-Edit: Looks like it shows up in the JSFiddle, albeit incorrectly, as well as the buttons. Here is what it looks like on my browser).
My JSFiddle: https://jsfiddle.net/ewrcxrrp/
HTML:
<div id="cookbook">
<div class="container">
<div class="row">
<div class="twelve columns">
<h1>Order the lemonade cookbook</h1>
</div>
</div>
<div class="row">
<div class="six columns">
<div data-configid="0/5714789" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
</div>
<div class="six columns">
<p>"As a chef, I have a very high bar that has to be met for me to enjoy other people’s food. Alan Jackson’s lemonade has more than exceeded that bar."</p>
<p1>- MICHAEL CHIARELLO, OWNER OF THE CRITICALLY ACCLAIMED BOTTEGA</p1>
<h2>get your copy:</h2>
<button type="submit" class="button-primary">Amazon</button>
<button type="submit" class="button-primary">Barnes & Noble</button>
<button type="submit" class="button-primary">Indie Bound</button>
<button type="submit" class="button-primary">Powell's Books</button>
<button type="submit" class="button-primary">Books-a-Million</button>
<button type="submit" class="button-primary">Overstock</button>
</div>
</div>
</div>
</div>
CSS:
#cookbook{
background-image: url(http://i.lmnd3.com/images/LemonadeBkg_Broc.jpg);
position: float;
min-height: 800px;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
#cookbook .issuuembed {
width: 525px;
height: 340px;
margin: 0 auto;
display: block;
}
#cookbook h1{
font-size: 4rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
text-transform: uppercase;
text-align: center;
margin-top: 10rem;
}
#cookbook p{
font-size: 2rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-style: italic;
font-weight: 700;
margin-bottom: 1rem;
}
#cookbook p1{
font-size: 2rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-weight: 400;
}
#cookbook h2{
margin-top: 1.5rem;
font-size: 4rem;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);
font-weight: 700;
text-transform: uppercase;
}
#cookbook button{
border-radius: 4px;
font-size: 16px;
background-color: #E4572E;
border-color: #E4572E;
-moz-box-shadow: 0px 2px 0px 0px #888888;
-webkit-box-shadow: 0px 2px 0px 0px #888888;
box-shadow: 0px 2px 0px 0px #888888;
}
#cookbook button:hover{
margin-top: 1px;
-moz-box-shadow: 0px .5px 0px 0px #888888;
-webkit-box-shadow: 0px .5px 0px 0px #888888;
box-shadow: 0px .5px 0px 0px #888888;
}
#cookbook button:active{
margin-top: 2px;
-moz-box-shadow: 0px 0px 0px 0px #888888;
-webkit-box-shadow: 0px 0px 0px 0px #888888;
box-shadow: 0px 0px 0px 0px #888888;
}
Any help or guidance is really appreciated!
All the best -
Apart from what Mohamed just wrote, there is one more problem with CSS - when hover over button happens, you add top margin 1px to button, as a result all buttons are forced 1px down and appears to be animated. Change button hover CSS to this
#cookbook button:hover {
margin-top: 1px;
margin-bottom: 9px;
-moz-box-shadow: 0px .5px 0px 0px #888888;
-webkit-box-shadow: 0px .5px 0px 0px #888888;
box-shadow: 0px .5px 0px 0px #888888;
}
Add margin-bottom: 9px; to compensate for 1px top margin on hovered button.
Also add a similar margin-bottom: 8px; to the :active state, to keep all the following buttons in from shifting when you click on one:
#cookbook button:active {
margin-top: 2px;
margin-bottom: 8px;
-moz-box-shadow: 0px 0px 0px 0px #888888;
-webkit-box-shadow: 0px 0px 0px 0px #888888;
box-shadow: 0px 0px 0px 0px #888888;
}
Thats happening because you are using the wrong class first of all. Are you using bootstrap as part of your css?.
In your CSS, you used hashtags instead of a dot (.) which is used to classify a css tag and can be triggered with "class". If you want to use a hashtag, you need to use:
id="cookbook button" instead of class="button-primary" on the button tag.
That is your only problem. You did not declare the css to the html document properly. If you change the hashtags to a dot (.cookbook button), then you can just add "cookbook button" to the css class declared on the HTML next to "button-primary" without any problems.
I need to make my box-shadow appear like a border: If I have a parent with a inset boxshadow and I put a child div in it, the box shadow should go over the child div like shown here with borders:
jsFiddle: http://jsfiddle.net/7rRsw/2/
Is there anything like a z index for this problem, or a css hack?
Thanks
EDIT: I need to use box shadow inset + no borders or box seizings.
I am searching for hacks to make this possible only with box shadow. A possible hack would be to add box shadows left and right on the child div.
If you want a solution in which you don't need any extra markup, you can use the ":before" pseudo class selector: http://jsfiddle.net/7rRsw/8/
HTML
<div class="a"><div class="b">No extra markup needed</div></div>
CSS
.a {
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position: relative;
}
.a:before {
content: '';
position: absolute;
left: 0;
right: 0;
width: 200px;
height: 200px;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
It is because your box shadow is inset. Meaning it will appear inside the box.
Whilst your nested div will cover it. Using a border applies to the outside of the "box".
Removing the inset from your CSS will cause the effect you are after.
See updated fiddle with inset remove. fiddle
box-shadow: 0px 0px 0px 2px black;
-webkit-box-shadow: 0px 0px 0px 2px black;
-moz-box-shadow: 0px 0px 0px 2px black;
UPDATE
To have just the inset box shadow visible, you could make the child div 4px pixels smaller in width than the parent. Then use margins to correctly position the div. However I'm not sure this completely achieves what you are after? See this fiddle.
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
}
.b {
width: 196px;
height: 100px;
background-color: yellow;
margin:2px auto 0 auto;
}
UPDATE 2
This "Hack" applies an overlay to the two elements with the box shadow. See fiddle.
HTML
<div class="a">
<div class="b">How it is (Yellow div covers the box shadow)</div>
<div class="shadow"> </div>
</div>
CSS
.a{
width: 200px;
float: left;
height: 200px;
margin-right: 100px;
background-color: red;
position:relative;
}
.b {
width: 200px;
height: 100px;
background-color: yellow;
}
.shadow {
box-shadow: inset 0px 0px 0px 2px black;
-webkit-box-shadow: inset 0px 0px 0px 2px black;
-moz-box-shadow: inset 0px 0px 0px 2px black;
position:absolute;
top:0;
width:200px;
height:200px;
}
One way is to not make your box-shadow inset so that it appears outside the box. But if you really want to use an inset box shadow, you can add a padding to the container element equal to the thickness of the shadow:
.a {
...
padding: 2px;
box-shadow: 0 0 0 2px #000000;
}
Add:
z-index: -1; /** less than the parent in general */
To the child element and it should work.
Give your main element position: relative, then create another div within that element that has:
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0px 0px 0px 2px black;
What this does is it creates an invisible div that goes over your content, then you apply your box-shadow to that div and it will lay on top of all the elements that were previously covering the shadow. It's like placing a sheet of glass with the shadow etched on to its edges over your element.
I want to get rid of the button basic Theme and make the button styleable as an a tag.
I want get rid of all of the ugly gray square in the button and substitute it with nothing as a link.
If you want to see my buttons, visit my website: "http://www.soundbust.com"
Here is my css code:
.button {
padding: 10px 25px;
-webkit-box-shadow: 0px 4px 0px #c8c8c8;
-moz-box-shadow: 0px 4px 0px #c8c8c8;
box-shadow: 0px 4px 0px #c8c8c8;
border-radius: 6px;
font-family: 'Questrial', sans-serif;
font-family: 12px;
color: #e4e4e4; /*#e4e4e4*/
text-decoration: none;
display: inline;
margin: 6px 0px;
background-color: #5a5a5a;
}
.button:hover {
background-color: #676767;
color: #d0d0d0 ;
-webkit-box-shadow: 0px 4px 0px #bababa;
-moz-box-shadow: 0px 4px 0px #bababa;
box-shadow: 0px 4px 0px #bababa;
}
This could be a great learning experience:
Take a look at how Bootstrap resets button-tags, especially for the "link" type. You can right-click on the link button and choose "Inspect Element..." to see its CSS styles.
It's late now so I'll post some actual code tomorrow if you haven't already figured it out by then :)
I'm stuck on how to start on this. I think either JavaScript, or PHP is required, or both to perform this functionality I need.
I've got a list of member profiles on a page to which next to each member name, I have currently a placeholder using only CSS and html that SHOULD display whether or not a member who is logged in is online (green dot) or if a member is logged out, it shows that they are offline (grey dot).
I do not have any JavaScript or PHP written up at all as I don't know where to start..., but it would be needed just for this small section and know it's something I'd need to make it work. All I can do is provide what html I have and CSS I have. I'd like it to perform a scan of who is logged in/out at least every 15-30 seconds only refreshing this small section (online - green dot or offline - grey dot) rather than the entire page (which I'm sure JavaScript is best for this) and of course to see whether or not a member is in fact online/offline by running a query on the session[ID] (which I'm sure PHP/PDO is best practice). Could anyone help steer me in the right direction from just the little CSS and HTML I have?
HTML:
<div id="profile">
<img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
<h2>Jason <online title="Online" /></h2>
</div>
<div id="profile">
<img src="images/ImagePlacedHere.jpg" width="80" height="80" style="margin: 4px 5px; float: left;" />
<h2>Nick <offline title="Offline" /></h2>
</div>
CSS:
#profile {
width: 300px;
height: 90px;
padding: 0;
margin: 10px 0 0 8px;
background: #222;
border: 2px solid #444;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
box-shadow: 0 28px 24px -24px #000, inset 0 -0.3em 0.9em 0.3em #000;
float: left;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
position: relative;
top: -10px;
left: -3px;
}
#profile:hover {
background: rgba(255, 255, 255, 0.05);
-moz-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
-webkit-box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
box-shadow: 0 0 0 0, inset 0 0.3em 0.9em 0.3em #000;
}
#profile h2 {
width: 195px;
height: 22px;
padding: 8px 0 1px 0;
margin: 0;
border-bottom: 1px solid #444;
float: left;
color: #B45F04;
font: 18px Arial, Helvetica, sans-serif;
font-weight: bold;
font-variant: small-caps;
text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
filter: progid:DXImageTransform.Microsoft.Shadow(direction=315,strength=2,color=000000);
}
#profile h2 online {
width: 15px;
height: 15px;
padding: 0;
margin: 0;
background: #009D0D;
border: 2px solid #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
-webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
float: right;
}
#profile h2 offline {
width: 15px;
height: 15px;
padding: 0;
margin: 0;
background: #222;
border: 2px solid #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
-webkit-box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
box-shadow: 0 4px 1px -1px #000, inset 0 -1px 4px 1px #000;
float: right;
}
Here is a demo of what I have: http://jsfiddle.net/tZpk6/
If more information is needed, I might be able to provide some more (possibly)...
You are going to want to use AJAX (I suggest using jQuery for this, it hides a lot of boiler plate code) to query the server once every X seconds.
You will have a script on your server that queries your database, asking if a user is online. You are going to need to track when a user was last seen, and decide how long is long enough between page impressions by your given user to decide when they are offline (IE 5 mins).
From that, you can just return a true/false response from your PHP script and update your green/gray dot accordingly.
If you want to get even more advanced, you can look into something like NodeJS which with the help of Socket.IO you can keep track of users in real time.
It's got nothing to do with client side Javascript. It's got nothing to do with HTML. If these aren't obvious then you've got a long journey ahead of you. You did ask the question nealry 9 years ago - maybe the answer will make more sense now (not sure why stack overflow has pushed this up to the front page).
You need to implement this in the session management of your application back end. And it also means replacing most of the session management code provided by whatever platform you decide to build this on. Scanning the currently open sessions to see which are active is a fairly obvious solution - but if your session data is large that could get very slow very quickly. You could alleviate the impact the impact by dissociating the checks from user HTTP access, but personally I'd go with putting a decorator on top of the session handler and maintaining an active user list as a separate data store in a database. You need to check the time the data was created/last updated - most web based session managers use a garbage collection model based on inactivity to remove old sessions.
When you log into stackoverflow.com via gmail or similar., when you click on the gmail button, it appears to be pushed down.
How do you achieve this effect?
I know how to use CSS3 to make something look raised using a drop shadow. But how do you make it appear to move down.
It appears they are removing the shadow while at the same time shifting the div to the previous place of the shadow.
However I'd prefer a more continuous effect. I only need this to work in modern browsers.
Also, they are moving on a hover event, I need it on a click event.
Here is the CSS for the buttons. No JS is required.
.login-page .openid_large_btn {
width: 100px;
height: 60px;
border: 2px solid #DDD;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
margin: 3px;
float: left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 2px 2px 4px #ddd;
-moz-box-shadow: 2px 2px 4px #ddd;
-webkit-box-shadow: 2px 2px 4px #ddd;
}
.login-page .openid_large_btn:hover {
margin: 4px 0px 0px 6px;
border: 2px solid #999;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
element.style {
background: #fff url(http://cdn.sstatic.net/Img/openid/openid-logos.png?v=8);
background-position: -1px -1px;
}
As observed above,
margin-top and left is increased, while the other sides are set to 0, from 3px:
margin: 4px 0px 0px 6px;
border is darkened:
border: 2px solid #999;
shadows are removed:
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
To add transitions, add this:
.login-page .openid_large_btn {
-webkit-transition: all 0.05s ease-in-out;
-moz-transition: all 0.05s ease-in-out;
-o-transition: all 0.05s ease-in-out;
transition: all 0.05s ease-in-out;