This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
Hi at my site website (password: ebriff) i have added small white triangles as pictures to the active link. But since i have a picture as my first menu link, it won't get added to that. How do I get around this?
CSS:
.top-menu li{
margin: 0;
float: left;
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
color: #fff; /* text color */
font-size: 15px;
text-shadow: 0 1px 0 rgba(0,0,1,.5); /* drop shadow */
letter-spacing: 1px;
font-weight: 300;
}
li.top {
border-right: 1px solid #007472;
border-left: 1px solid #009C9A;
}
li.top:last-child {
border-right: none;
}
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
.current {
background: url({{'triangle.png'|asset_url}}) no-repeat center bottom}
}
You can put the home icon as background image for the link instead of the list item. At least this worked for me when I tried it in chrome developer tools ;)
So instead of
li.top:first-child {
width: 70px;
border-left: none;
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
text-indent: -9999px;
}
use
li.top:first-child {
width: 70px;
border-left: none;
text-indent: -9999px;
}
li.top:first-child a{
background: url({{'home-icon.png'|asset_url}}) no-repeat 24px 25px;
}
You may use CSS3 multiple backgrounds
background: url(...), url(...);
or you may manually create an image with arrow overlayed over the "normal background icon" and use it for the :active selector.
Consider using CSS sprites as well.
On multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/
Related
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I dont get it, it seems so simple. I want to add a span style to
the "Hello" text with a .class
http://www.mysecretathens.gr/kulte_test/index.html
Why doesnt this .greeting class work? It only becames 60pixels when I put it like that
<span style="font-size:60px;">
Any ideas?
You havent closed a CSS class above it. Put a curly brace righ before:
::selection{
like so:
#container2 {
background-color: #ebebeb;
height: 400px;
background-image: url("white_arrow.png");
background-repeat: no-repeat;
background-position: 50% -28px;
margin: 0 auto;
padding-top: 80px;
text-align: center;
color: #636161;
font-family:'Open Sans', sans-serif;
font-size: 20px;
line-height: 30px;
}
::selection {
color: #fff;
color: rgba(255, 255, 255, .85);
text-shadow: none;
background: #da0225;
}
The problem is that you didn't close the #container2 css rule.
#container2 {
background-color: #ebebeb;
height: 400px;
background-image: url("white_arrow.png");
background-repeat: no-repeat;
background-position: 50% -28px;
margin: 0 auto;
padding-top: 80px;
text-align: center;
color: #636161;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
line-height: 30px;
}
Use spaces between your curly braces!
(it rhymed).
oh and the real issue with your site is #container2 is missing a closing }.
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I have inherited a legacy app for a rewrite and have run across a curious problem. There is tabular data displayed on the page where the title of the table is within a trapezoidal shape that resembles a manila envelope tab. At the bottom of such tables, there is usually a button row that is the same shape as the table title but rotated 180°. Currently, this effect is being pulled off by using a square image with a white triangle in one half on a transparent background as a background image in the corner of a rectangular block to achieve the look of a trapezoid. However, this technique is prone to flickering when the page is refreshed.
As an exercise, I have tried to see if I can replace this with a pure CSS technique. I found this link to different shapes in CSS and have emulated the trapezoid to look as I need. I am able to place the table title text within a trapezoid correctly. However, when I need the look of the 180° rotated trapezoid, I am unable to get the text to place within the shape. My code is included below and here is a jsFiddle showing what I have accomplished so far. I understand that the text shows below the rotated trapezoid because the height is set to 0 and I'm using border-top to build the shape. Is there anything I can do to get this to work correctly?
Please keep in mind that I need this to display in IE8 (and possibly also IE8 in compatibility mode -- IE7). Also, I'd like to keep additional HTML elements to a minimum because I want to keep this as semantic as possible. I know I can place a span inside the div and absolutely position that span so that it displays the text within the shape, but when I do that I have to manually set a width on the trapezoid and when the width can vary from button row to button row, I'd rather not go down that path.
Thanks.
HTML:
<div class="trap">Title Text</div>
<div class="trap180">Button Row</div>
CSS:
.trap {
color: black;
font: normal bold 13px Arial;
border-bottom: 27px solid #F00;
border-right: 27px solid transparent;
height: 0px;
float: left;
line-height: 27px;
padding: 0 4px;
}
.trap180 {
clear: both;
color: black;
font: normal bold 13px Arial;
border-top: 27px solid #F00;
border-left: 27px solid transparent;
height: 0px;
float: right;
margin: 20px 0 0 0;
line-height: 27px;
padding: 0px 4px 0;
}
It's possible with pseudo-elements. But I don't have access to those old browsers to test.
.trap, .trap180 {
color: black;
font: normal bold 13px Arial;
float: left;
line-height: 30px;
height: 30px;
padding: 0 4px;
background: salmon;
position: relative;
}
.trap180 {
float: right;
margin: 20px 0 0 0;
}
.trap:after,.trap180:after {
content: '';
position: absolute;
height: 0px;
width: 40px;
top: 0;
}
.trap:after {
right: -30px;
border-bottom: 30px solid salmon;
border-right: 30px solid transparent;
z-index: -10;
}
.trap180:after {
left: -30px;
border-top: 30px solid salmon;
border-left: 30px solid transparent;
z-index: -10;
}
Demo
Frankly, if you need to still support IE7, I would just use images or allow a little graceful degradation.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
There has been some controversy regarding the practice of doing the following:
a, input, textarea, button {
outline: none;
}
Accessibility issues are a common concern.
It is not my intention to remove this feature altogether (as the code above does); however, this feature greatly messes with my original design by adding unintended borders (erm, outlines?) in unwelcome areas.
The main problem is that these outlines actually follow the rectangular area around the element, not its contour (i.e. it ignores border radius, etc.).
Example:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
The only solution of which I am aware is to have the above code running and employ my own system.
What are the best practices when taking this approach?
Indeed. An outline is around the rectangular area on the outside of the border. It doesn't take rounded corners into account.
There's nothing wrong with disabling the outline, just make sure you add some other accessibility feature for people using the keyboard, for instance, change the color of your background on focus:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
outline: 0;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
input:focus {
border-color: #999;
}
<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>
As many form elements, the button element has different renderings in browsers, and as many fixes are needed...
http://fvsch.com/code/button-css/ from F. Verschelde should let you outline buttons around the whole element and not around its content.
Some times I may may want an anchor beside a submit button, but I always seem to have problems lining them up ...
a, input[type=submit], input[type=button], button {
font-family: arial;
background: #fff;
color: #777;
border: 1px solid #ccc;
font-size: 12px;
line-height: 20px !important;
padding: 5px 10px;
margin: 0;
}
http://jsfiddle.net/cXgzM/
with that, anchors are still 2 pixels short
Simply add this to your CSS:
a
{
display: inline-block;
}
I updated your example. Note that this property doesn't work in IE7 and lower. :)