This question already has answers here:
How to get box-shadow on left & right sides only
(16 answers)
Closed 7 years ago.
I have a certain thing I want and it annoys me that I cannot find a way.
This is how it is now:
I want the red lines to be green:
The 2 identical text uses this HTML:
<.article class="shadow">
<.header>
<h3>Welcome!<./h3>
<p><ul>(Vincent, 2014-11-07)</ul></p>
</header>
<br>
<p><b>Greetings visitors!</b></p>
<p>You have entered the URL to this site for a reason. To see my work related to making game music. You might aswell look into the FL Studio section, were you can listen to my music on the website or actually download the music to use it. You can also read about me and how these music tracks were made and what I had to go through to make these.</p>
<p>I hope you have a look around.</p>
</article>
I couldn't find a way to paste it in better.
Don't mind the "dots" in the first row of the HTML code.
This is the CSS that I am currently using:
.shadow {
-webkit-box-shadow: inset 1px 0px 0px 0px #47D147;
}
I hope you can understand what I am trying to say.
I don't use javascript or php. I only use HTML and CSS.
Can explain what the CSS code does?
I found out and for the future:
How to get box-shadow on left & right sides only
or use
-webkit-box-shadow: inset 1px 0px 0px 0px #47D147, 1px 0px 0px 0px #47D147;
Related
This question already has answers here:
Are empty divs bad?
(6 answers)
Closed 3 years ago.
We were in a code review and were looking at the following mark up that essentially had a border to split up some content above with the title below:
<div class="divider"></div>
<h3>Title</h3>
We were told that this is super bad practice and that instead you should style the h3 element with a border top to avoid divitis. Is this true? I understand not wanting to fill your markup with tons and tons of divs, however, in this instance I don't see much of a problem. Also, in this instance, to get the same design there was more lines of css needed on the h3 than the original divider class. So although you save markup, you are not saving styles. Another option is to wrap the h3 in the div so there is no empty markup. In the end I feel as though it is just preference?
Thoughts?
Depending on your page layout. In general, an blank element does not cause divitis:
<div class="divider"></div>
<h3>Title</h3>
so that in many front-end frameworks these types of elements are embedded by system by default.
finally, It depends on the structure of your page and the purpose of the pages and software.
This can be seen from different angles:
If your design is such that you use dividers in addition to the titles elsewhere, it is best to use the following structure, as this will keep your hand open:
<hr class="divider">
<h3>Title</h3>
But if these dividers are limited to titles only and not used elsewhere, you can use a structure like this:
<h3 class="border-top"></h3>
<h5 class="border-bottom"></h5>
and
.border-top {
border-top: 1px solid black;
}
.border-bottom {
border-bottom: 1px solid black;
}
Using something like this is a Bad Practice and I strongly believe in that.
HTML already has a built-in horizontal divider called <hr/> (short for "horizontal rule"). Bootstrap styles it like this:
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
You Can customize it and use it wherever you want according to your needs.
This really depends on if you are using a CSS framework / library and if you will be working with a team. You need to write understandable and predictable code that the rest of the team will be able to pick up and work on. If <div class="divider"></div> is the standard way per the framework then I would continue to use that.
I also would not consider this "divitis" as that usually refers to a large number of nested <div> elements. Such as
<div class="foo">
<div class="bar">
<div class="baz">
etc...
EDIT: As others have mentioned, which I should have included, is that in cases other than where a framework and / or team are involved, it is generally considered bad practice to not use the spec element. In this case <hr />
I'm finding in several places the use of a single class for a single css attribute. The result is something like this:
<header>
<h1 class="secondary-text-colour heading-large">#Messages("xxx")</h1>
<span class="secondary-text-colour heading-small">#Messages("xxx")</span>
</header>
We can see how heading-large is only used for setting the font size or primary-text-colour is used to set the colour of the font.
My idea of good design would be something like:
<header>
<h1 class="header-main">#Messages("xxx")</h1>
<span class="header-subtitle">#Messages("xxx")</span>
</header>
In this second scenario you define a class for your element and you define the style with the css.
I sincerely think that this is how css and classes should be used but I need formal explanation to defend it in front of other team members. Can anyone give me any feedback on this?
This is exactly how classes should be used. They provide a semantic layer of abstraction to the reader of the HTML. I would encourage you to read this book about SMACSS it provides a great understanding of CSS architecture in general.
EDIT
Your idea is less modular than the original approach, see the SMACSS book for more information on this topic. Maybe you would like to change the color of this new headline, but still have the same font as in all other headlines. If you have one selector for each you would have to change both places if the font changes later. This gets even harder if you have large stylesheets and searching each position in the styles which would be needed is much harder than writing two classes in fist place.
As an example... You have a very big project whith a design that requires many boxes with a box-shadow.
If You have to copy and paste:
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
for every container class that is going to have the shadow you are adding hundreds of unnecesary lines to your css sheet. But if you just add a single class like:
.shadow {
-webkit-box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.2);
}
You just need to add the class to whatever container needs the shadow in the html.
Faster, cleaner, easier.
how to make a circular highlight over any object on a site....
I been looking around and can't find almost any documentation for this. Although I seem to believe that anything is possible now with css, something tells me this would only be available with something like canvas and take a lot of memory.
The only other post I've seen about this is this one...
(jquery) Blackout the entire screen and highlight a section of the page?
although they didnt address the circular issue there
I've seen on a few sites how to highlight a certain element, but how exactly would you make the highlighted area a circle? By only adding z-index to make a square element show above the overlay, it seems impossible to make the area a circle..
Maybe I could z-index every element that would be included in the circle and create a shadow around the edges the same color as the overlay(but if the spotlight needs to run onto part of the background i would need to include the entire background and that could turn ugly)...this may work actually, in certain cases, but that sounds a bit jenky, no?
anyone have a good solution for highlighting objects on a page but that highlight being a circle / almost like spotlighting a element...
You can do this with border-radius and box-shadow at least that's the only way I can think of with pure css
What you do is you make an element that is circle with a transparent background, then you give it a box-shadow completely black that will fill the whole of your page, and you can get some amazing effects.
Example code
#torch{
width: 200px;
height: 200px;
background: transparent;
border-radius: 50%;
position: fixed;
box-shadow: 0px 0px 0px 2000px #000, 0px 0px 50px inset;
}
Don't forget to add your prefixes -moz-, -webkit- ..etc and don't forget your z-index if you need it.
Demo at JSFiddle
By using border-radius to make the circle and for the other stuff may be this can help you..http://jquerytools.org/demos/toolbox/expose/
Just use border-radius to make the container you want to "expose" a circle.
Using the jsfiddle example from your linked post, i've trimmed it down to be easier to follow, but essentially, you just need to use the post you linked to along with a big border radius value to mimic a circle.
http://jsfiddle.net/98EAt/
2 years since the question was asked,
I've developed a plugin for this matter,
Let me know your feedback.
I want to know which is best method for fast loading website.
I know,
more http requests, slow will be the website
more DOM element, slow will be the website
Now,
I am confuse in following methods:
First, i used extra div element to show drop-shadow effect like this
<div style="height:100px;width:100px;border:1px solid #eee">
<div style="height:100px;width:100px;border:1px solid #ccc">
<div style="height:100px;width:100px;border:1px solid #aaa">
<div style="height:98px;width:98px;border:1px solid #999">
<div style="height:96px;width:96px;border:1px solid #777">
hello world
</div>
</div>
</div>
</div>
</div>
Second, i used background image to show drop shadow effect like this
<div style="background-image=url(drop-showdow.png)">
hello world
</div>
More http-request and more more dom element is not good for optimized website. What to do? and WHY?
Why not just use CSS?
box-shadow: 0 0 5px 3px #777;
For something like this, which adds appearance rather than being a required feature, just use plain CSS. If people are still using old enough browsers that don't support it, tough break for them. The Internet as a whole cannot advance if we spend every day worrying about people still in the Stone Age.
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 9 years ago.
Improve this question
Is it possible to convert Elements I created with Photoshop.
f.e. If I created a "skin" for a button in Photoshop without any Text in it. Could I convert it to CSS so that I can add a Text and adjust the Button's height/width later when adding the button to the HTML?
If it is possible, how?
Thanks in advance!
there are a lot of tutorials that will teach you to slice photoshop to html & css
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/
but to answer your question. It all depends the button you designed. But for the standards wone you will have to copy the background of your button into a new document and save as a png or jpg (make sure to slice a 1 or 3px image that can be repeated)
and then with some css3 magic you can style your button and make sure it fits the content of your button.
eg:
input[type="text"]
{
/*add rounded corners*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#000 url('../images/button-background.jpg') repeat-x top left;
paddng:3px 6px;
margin:2px 0;
}
the url to the background should point to the image and best add a matching background color when the button is to big
What you're trying to do has many, many different solutions. Here are just a couple:
1. You could create the button using css3 only
warning: this solution will not work on older browsers without javascript plugins
html
Hello World
css
.button {
border:solid 2px white;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:5px 5px 5px black;
box-shadow:5px 5px 5px black;
padding:20px;
background:lightgray;
color:darkgray;
}
2. You could create the button using 2 images
photoshop:
create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
___________________________
/
| button1.png ...
\___________________________
now create the right side of the button.
make sure it's very short, like below:
_____
\
... button2.png |
_____/
html
<a href="http:/my.url.com/" class="button">
<span>Hello World</span>
</a>
css
.button {
background: url(path/to/button1.png);
}
.button span{
height: (height-of-button2.png);
line-height: (height-of-button2.png);
padding: 0 20px;
background: url(path/to/button2.png) no-repeat right top;
}
These are just a couple variations.
EDIT: apologies. the above code was wrong. i fixed it just now.
No, it's not possible to convert directly from Photoshop Elements to a HTML and CSS version that scales. You need to either export the whole button as one big image (and use a separate image for each button), or construct the button yourself with CSS.
Sexybuttons - http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html would let to create a button in Photoshop and once you have built it in CSS it would adjust its width to whatever text you put in it, as for height...not sure.
It's not a good idea to use Photoshop for creating code. It creates god awful looking code. It's best to just slice and name your slices, save them to images and then write code by hand. Unfortunately it's a very manual process and bridging the gap between design and code isn't something humans have done well yet!