By any chance anyone know how the these cute blue boxes under "Browse Categories" are created? Is it simple css and javascript?
Once I know what they are called I can google something like "Cute Blue boxes generator" or something along those lines.
url with cute boxes:
http://vimeo.com/categories
The majority of the styling is simply adding rounded corners to a light blue box. In CSS, a similar effect can be achieved (in modern browsers) with:
li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Note Vimeo simply uses an image as a background:
http://a.vimeocdn.com/images/categories/cat_browse_on.png
It's a simple background image put there with CSS:
#cat_browse ul li.highlight {
background: url(http://a.vimeocdn.com/images/categories/cat_browse_off.png);
}
Related
This is the CSS code I use:
a {
text-decoration: underline dashed;
}
And you can see here that it is displayed differently on different browsers:
On Mozilla:
On Brave:
On Chrome:
How can I make the look consistent?
There are many ways of underlining text without using text-decoration: underline. One way of doing this is with bottom borders.
First make a CSS class for all the text you want to have underlines. Something like this should do:
.dashed_underline {
border-bottom: 3px black dashed;
}
Then apply this class to your intended paragraph element:
<p class="dashed_underline">This text has a dashed underline</p>
You should find that the underline now looks the same across web browsers.
Well since every browser has it's own unique way of displaying HTML and CSS you can use something like this
.dash.underline {
text-decoration: none;
background-image: linear-gradient(to right, #000 75%, transparent 75%);
background-position: 0 1.04em;
background-repeat: repeat-x;
background-size: 8px 3px;
}
<p class="dash underline">See it works!</p>
You can read Why does your text decoration or any other stuff looks different from browsers to browsers here at webfx.com
You can also checkout Underline.js they are doing some pretty good job just for underlines and stuff. Underline.js GitHub
You can use the code below
a
{
text-decoration-thickness: 2px;
}
I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
when I hover the mouse over it, the cursor doesn't change into hand until you actually over over the text. (For example, if you pay attention to SO navigation, your cursor changes into hand as soon as you touch the gray area. I am talking about Questions, Tags, Users, Badges, Unanswered navigation)
when I click on it, it borders the link-text.. like it's dotted border or something by default. How do I get rid of that?
There are two ways of getting the hand cursor on the entire area; either you make the link take up the entire area (perhaps by being the entire area), or you add the style cursor:pointer; to the area. (Making the link cover the whole area is usually the better option, as that also make the entire area clickable.)
To get rid of the dotted border on links when they‘re clicked:
a:active {
outline: none;
}
For SO navigation, it is done in following way:
<li class="nav">
Questions
</li>
.nav a {
padding: 6px 12px;
}
The gray area you see is actually the link itself (achieve by setting the padding). To get rid of the border, you should specify by a:link:
.nav a:active { outline: none; }
For (1), use the <a> around your whole <div>, not just the text, and that will make the cursor change to the hand cursor when entering the div. Another way is to change the <a> to have a style similar to
a { display: block; width: 300px; height: 100px; background: orange }
the background is just for trying it here. It can be removed.
For (2), use
a { outline: none }
Try using the following in your CSS.
a:focus {outline: none;}
However, I believe older versions of IE will not honor this code.
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}
I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.
Trying to create a simple rounded corner link button:
html:
<span>Add A New Somthing</span>
css:
.link_button {
background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial;
height: 41px;
margin-right: 6px;
padding-right: 14px;
text-decoration: none;
}
.link_button span {
background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
display: block;
line-height: 31px;
padding: 5px 0 5px 14px;
}
.link_button:active {
background-position: bottom right;
color: #000;
outline: none;
}
.link_button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
results:
alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg
The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.
I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.
Did I miss something?
Thanks in advance.
Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."
There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.
ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.
Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.
If you still can't see it, move your head vertically up and down to see you monitor from different angles.
Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.
Try previewing in Firefox and let us know if its the same?
Your image has a transparency set to the button. Look at your layer - maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image?