Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am trying to see if its possible to achieve this kind of shadow using pure css3:
I quickly mocked this up in photoshop. I am looking for that curved shadow effect. I know its possible to get straigt shadow effects. I tried to look on google I dont even know what to call that curved shadow. I couldn't find anywhere that says its not possible. Couldnt find anywhere that says it IS possible either.
if css3 isn't happening, I am willing to use jQuery.
any help, much appreciated.
thanks.
edit: The closest I've gotten to achieve any sort of shadow just with css3 is this: http://jsfiddle.net/tVt4w/
At first I didn't think it was possible. Then I found this page that shows some nice examples in pure css.
Nifty.
See the demo page for an idea of what can be achieved.
HTML and CSS only
The shadow automatically adapts to the width of the image.
Using a PNG image, this can be done:
(not exhaustively tested for compatibility but it works in the latest FF, Safari and Chrome)
<style type="text/css" media="all">
.shadow {
position:relative;
width:auto;
padding:0;
margin:0;
}
.shadow:before,
.shadow:after {
content:"";
position:absolute;
z-index:-1;
}
.arch01:after {
position:absolute;
padding:0; margin:0;
height:34px;
width:100%;
bottom:-30px;
left:0px; right:0px;
background-image: url('arch_01.png');
background-size:100% 100%;
background-position:left top;
}
</style>
<span class="shadow arch01">
<img src="photo.jpg" width="500px" height="250px">
</span>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a logo that I need to insert into an html page, that logo is in a square size but I need it to become a circle, how can I do that using CSS?
.logo {
background: url('path/to/image.jpg');
height: 100px;
width: 100px;
border-radius: 100px;
}
This should do the job. Set the background url to the one of the logo and height and width accordingly.
Use border-radius. A simple example you can see here:
img.logo {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<img class="logo" src="http://placehold.it/100x100"/>
Use border-radius then set overflow to hidden.
use border and make
border-radius:50%;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I often see this code on some sites:
body:before {
content: "";
width: 0;
height: 100%;
float: left;
margin-top: -31700px;
}
What is the result of using this CSS?
According to this Website, it's an opera fix http://www.cssstickyfooter.com/using-sticky-footer-code.html , on this site, it's used for a sticky footer.
Sticky footer means it always sticks to the bottom of any window, also when there is not enough content to fill the screen.
The CSS Code
Below is the CSS code that makes your sticky footers actually stick to the bottom.
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
See a fiddle here: http://jsfiddle.net/f3Uvs/2/
Used to add cosmetic content to an element, by using the content property. This element is inline by default. The ::before notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :before introduced in CSS 2.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Opera Browser grab the bottom of the window and move it up and then down to see that it's not working as expected. This has always been operas main problem.
So in that case body:before { } used.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I know that bootstrap 3 is not compatible with IE7. However, I need to make it workable for the form I am building. This is not responsive.. just need to work nicely with IE7 including the error messages...
As you can see by comparing it on IE7 and any other nice browsers like Chrome, the state and age fields are not aligned side by side as it should be. The 2nd tick box is not aligned to the right of the 1st tick box... and there is a black line over the enter details button. Any help please?
Even though IE7 has extra low share, it is something that the client wants. I love using Bootstrap and he doesnt want any responsiveness... and doesnt even want %/em etc.. wants fixed width. Hence the code has fixed width.
To answer another query from below, I was hoping bootstrap3 has some kind of css patch that makes it workable for IE7 or atleast direct me on how to fix the issues listed here. HOwever I did end up fixing them. So thanks guys.
Link is here
http://staging.serviceportal.com.au/service05/discovery_2014.do
I solved the issue as below
body .container {
width: 900px
}
body input {
height:20px !important;
}
/*.form-control{
behavior: url(http://localhost/On%20Going/Discovery/January2014/discovery/web/pie/PIE.htc);
}*/
body select {
height: 34px !important;
width: 120px !important;
}
.firstName, .lastName, .age{
margin-bottom:15px
}
.col-sm-6 {
width: 50%;
}
.tick1{
padding-left:0px;
width:160px !important
}
.discoveryButton, .discovertMandatoryText{
float:left !important
}
.discoveryButton{
width:154px !important
}
.discoveryButton #submit{
text-indent:-9999px;
display:block
}
.discovertMandatoryText{
width:139px !important
}
.col-sm-7.tick2.has-pretty-child{
padding-left:0px;
width:270px;
margin-left:150px;
margin-top:-70px;
}
.age-state .age{
width:118px;
}
.email{
margin-top:10px;
}
.stars{
margin-left:10px;
}
select.state{
margin-left:60px
}
.state .stars{
margin-left:35px !important
}
So what I basically did is to look in firebug in a nicer browser like Firefox and get the margin, padding and width needed. I just copied those into the IE7.css file. And it worked. Yeep it is not responsive in ie7. However, by doing what I did, I was able to make it look nicer in IE7. I guess if someone is using bootstrap3, then do look at the padding/margin/width where it is breaking in IE7. Then take those values and add in IE7 only css file. Hope it works and helps someone
If you absolutely have to have IE7 compatibility, use a conditional statement to target IE7 and add styles as needed to fix issues you have:
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="your_css_dir/ie7.css" />
- OR -
include your IE7 specific css here...
<![endif]-->
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Well I don't know how to explain it correctly. Here, check this screenshot which has what I want to make. My designer gave me this. If I don't find a solution i'll use images and no code. Is it possible to do this with CSS3?
Here is the image
See the triangle inside that box? I want to do this. Thank you!
Creative use of borders to achieve this effect, no images were harmed in the following sample and you can even set the position of the arrow on the element itself - becomes more straightforward if you can hardcode it for your design.
HTML
<div class="top">
<span class="arrow" style="left:40%"></span>
</div>
CSS
.top {
background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
background-size:cover;
width:300px;
height:300px;
border:1px solid #888;
position:relative;
overflow:hidden;
}
.arrow {
border:30px solid #aaa;
border-bottom:none;
border-color:transparent #aaa transparent #aaa;
position:absolute;
left:0;
bottom:0;
}
.arrow:before, .arrow:after {
content:'';
position:absolute;
width:5000px;
bottom:0;
height:30px;
background:#aaa;
}
.arrow:before {
right:30px;
}
.arrow:after {
left:30px;
}
Working JSfiddle sample.
Or the full integrated sample here.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a website that needs a few css made banners and I'm having a bit of trouble creating them. I would show you what I had, but their too embarrassing to share...
My goal is to try and only use html and css to build these instead of images. This is kind of what I'm trying to build with the text inside of it...I think that is where I'm failing.
Any help would be much appreciated and would save my head the pain of hitting against the wall.
The only thing you need is a <div> element and manipulate the CSS.
Have a look here and here as they have everything that you will need to get started
I've also created a Fiddle for you that will give you the effect you want.
EXAMPLE
HTML
<div class="bookmarkRibbon"></div>
CSS
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
And here is your flag with text inside as you show it in the picture.
EXAMPLE
HTML
<div class="ribbon">BANNER</div>
CSS
.ribbon {
text-align:center;
display:block;
width:100px;
height:100px;
background:#d00202;
}
.ribbon:after {
content:"";
display:block;
position:relative;
top:80px;
width:0;
height:0;
border-width:30px 50px 50px 50px;
border-style:solid;
border-color:#d00202 #d00202 transparent #d00202;
}