Like this. With IE6 compatibility too.
<ul>
<li>Home</li>
<li class="selected">About</li>
<li>Contact Us</li>
<li>Portfolio</li>
<li>Gallery</li>
<ul>​
You can use this jsfiddle example to play with
http://jsfiddle.net/jitendravyas/GN6ed/
and this arrow image http://i.imgur.com/QHFqq.gif
You can use CSS3's transform property to rotate a small box to 45 Deg, and make it look like an arrow.
.arrow {
width: 30px;
height: 30px;
background: #000;
-webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(45deg); /* FF3.5+ */
-ms-transform: rotate(45deg); /* IE9 */
-o-transform: rotate(45deg); /* Opera 10.5 */
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');
zoom: 1;
}
Here is a demo
Update 2: Here is the PURE CSS SOLUTION with the border too.
This wouldn't be easy to accomplish in IE6.
You could use something like this. But it wouldn't be supported in IE6 as it doesn't support the ::before pseudo class.
.selected {
position:relative;
}
.selected::before {
content: "";
position: absolute;
top: 100%;
left: 42%;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 13px solid red;
}​
If you decide to do this with just css take a look at this http://www.robjstanley.com/css3-shapes/.
There's a speech bubble shape that you can do with just css3, pretty cool.
I didn't tested it on IE6 but i am sure it's work on it.
Check this http://jsfiddle.net/GN6ed/4/
Simple CSS will do the trick:
.selected a {background:white;
background-image: url(http://i.imgur.com/QHFqq.gif);
background-repeat: no-repeat;
background-position: 50% 0%;
}
Updated fiddle.
Dunno about IE6 can't test it here but I think this is as cross browser as possible, using basic CSS stuff.
Related
I am trying to create a div to align with the bottom corner of a form input but with a triangular arrow pointing to the corner and merged into the box. I am having problems creating this as i am not a designer. Basically what i'm looking for is a kind of arrow that merges with the box (maybe like a speech bubble)
Anyway code so far:
html:
<div class="inputwrap">
<select id="gb_contact" name="gb_contact" class="dropdown-input" >
<option value="option">option</option>
</select>
<div class="tip">rrrrrrrrrrr</div>
</div>
css
.inputwrap{
position: relative;
display: inline-block;
min-width: 10%;
}
.tip:before {
position: absolute;
content: " ";
width: 0;
height: 0;
border-style: solid;
border-width: 15px 15px 0 0;
border-color: #00FF00 transparent transparent transparent;
z-index: 100;
left: -0px;
top: -2px;
-ms-transform: rotate(5deg); /* IE 9 */
-webkit-transform: rotate(5deg); /* Chrome, Safari, Opera */
transform: rotate(5deg);
}
.tip {
position: absolute;
right: -190px;
background-color:#ff0000;
min-width:200px;
min-height: 50px;
margin-top:2px;
border-radius:5px;
}
can anyone help with this?
jsfiddle: http://jsfiddle.net/d30top88/
link to concept:
https://drive.google.com/file/d/0B9ZIIks7bG2QT2haMWZZcXM3ZWc/edit?usp=sharing
close enough i suppose :
http://jsfiddle.net/d30top88/4/
What do you mean with merged inside the box? Just adjusted your fiddle like that:
Arrow Demo
with some adjustments:
top: 12px;
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
So it the arrow is now pointed to the right and down in the div.
Update after image link was provided in question:
Arrow Demo 2
But based on the image maybe the arrow has not the appropriate shape to meet your requirements. There are some nice css arrow generators online, just google for "css arrow generator" as I don't want to promote a special one.
I figured out how to add an opening quote marks on my quote (using a background), but how would I add a closing quote marks in my style. I'd like to add a closing quote marks image after the Russell Wilson is a great quarterback.
If I'm not doing it the preferred way, can you suggest the best practices for making this happen?
Jsfiddle
<p>
<span class="inline-quote">Russell Wilson is a great quarterback</span>
Russell Carrington Wilson is an American football quarterback for the Seattle Seahawks of the National Football League. Wilson was selected by the Seahawks with the 12th pick in the third round of the 2012 NFL Draft.
</p>
.inline-quote {
background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png') left top no-repeat;
background-position: 15% 5px;
}
you can use :before and :after
Demo
.inline-quote:before, .inline-quote:after{
display:inline-block;
width: 20px;
height:20px;
background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png');
background-repeat: no-repeat;
content: '';
}
.inline-quote:after{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
You can only have one background per element. So make a pseudo-element!
.inline-quote { position: relative }
.inline-quote::after { /* Insert it after */
content: ''; /* Required for it to show up */
position: absolute; /* Stretch it */
top: 0; right: 0; bottom: 0; left: 0;
background: url('http://www.pearl-guide.com/forum/images/Eloquent/miscblue/quote_icon.png') left top no-repeat; /* Same background */
background-position: 15% 90%; /* Position it in the lower right */
transform: scaleX(-1); /* Flip it */
-webkit-transform: scaleX(-1);
}
http://jsfiddle.net/bmj942y4/5/
You should also be using the blockquote element. http://jsfiddle.net/bmj942y4/7/
You can use multiples background-image
Example
background-image: url('img1.jpg'), url(img2.jpg);
background-position: 15% 5px, 85% 5px;
Work with
Firefox 3.6+
Safari 1+
Chrome 1.3+
Explorer 9+
Opera 10.5+
More informations
http://www.css3.info/preview/multiple-backgrounds/
Trying to replicate answer to question:
Not skewed text in skewed class button
The code for the answer is provided at: http://jsbin.com/obusoy/6/edit
My problem is that my solution must work in IE8, so I must use -ms-filter instead of the more friendly skew function in CSS3.
I obtained values for the transform from http://www.useragentman.com/IETransformsTranslator/
My CSS is:
.button-wrapper {
background: #fff;
border: 1px solid #bbb;
border-color: #ddd #ccc #bbb;
overflow: hidden;
width: 120px;
height: 40px;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=-0.6840402866513375, M21=-3.885780586188048e-16, M22=1.0641777724759122, SizingMethod='auto expand')";
margin-left: -6px;
margin-top: -4px;
/*
FORMULA IN TRANSLATER: skew(-20deg) rotate(20deg)
EQUIVALENT OF:
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
*/
}
.button-wrapper:hover {
background: #efe;
border-color: #090;
}
.button-wrapper button {
background: transparent;
border: 0;
cursor: pointer;
font-size: 20px;
font-weight: bold;
padding: 4px 0;
margin: 0;
width: 100%;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8152074690959046, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=1.064177772475912, SizingMethod='auto expand')";
/*
FORMULA IN TRANSLATER: skew(20deg) rotate(-20deg)
EQUIVALENT OF:
-webkit-transform: skewX(20deg);
-moz-transform: skewX(20deg);
-o-transform: skewX(20deg);
transform: skewX(20deg);
*/
}
.button-wrapper button:hover {
color: #060;
}
My HTML is:
<div class="button-wrapper">
<button id="RefreshButton3" runat="server" ServerClick="RefreshButton_Click">Refresh</button>
</div>
My problem is the text is not quite skewed back to the original amount (looks compressed horizontally and still slightly italic).
What are the correct transform values to use? What step am i missing?
UPDATE: Solution found.
Problem was the order of operation matters. If the first transform is skew() rotate() then the second transform must be rotate() skew(). This gives a slightly different matrix in second step of:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')";
(posting as separate answer as recommended in comment)
Problem was the order of operation matters. If the first transform is skew() rotate() then the second transform must be rotate() skew(). This gives a slightly different matrix in second step of:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.064177772475912, M12=0.6840402866513375, M21=-3.885780586188048e-16, M22=0.8152074690959046,, SizingMethod='auto expand')";
I have written below code. But now the requirement is that the image should be rotated 180 degrees. How can I achieve this?
#cell {
background-image: url("../images/logo.PNG");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0px 250px;
background-color: #FFFFFF;
border-left: 2px;
}
HTML tag:
<td width="2%" id="cell"/>
One cross-browser solution is
#cell {
-webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */
-moz-transform: rotate(180deg); /* FF */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
transform: rotate(180deg); /* W3C compliant browsers */
/* IE8 and below */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand');
}
Note, that for IE8 and below, the rotation center point is not located in the center of the image (as it happens with all other browsers). So, for IE8 and below, you need to play with negative margins (or paddings) to shift the image up and left.
The element needs to be blocked. Other units that can be used are:
180deg = .5turn = 3.14159rad = 200grad
If you don't have any text in the <td> you can use transform: rotate(180deg); on it. If you do have text, this will rotate the text too. To prevent that you can put a <div> inside the <td>, put the text inside that, and rotate that 180 degrees (which puts it upright again).
Demo: http://jsfiddle.net/ThinkingStiff/jBHRH/
HTML:
<table>
<tr><td width="20%" id="cell"><div>right-side up<div></td></tr>
</table>
CSS:
#cell {
background-image: url(http://thinkingstiff.com/images/matt.jpg);
background-repeat: no-repeat;
background-size: contain;
color: white;
height: 150px;
transform: rotate(180deg);
width: 100px;
}
#cell div {
transform: rotate(180deg);
}
Output:
You can also try this axial type rotation OR rotation on Z-axis.
.box {
background: url('http://aashish.coolpage.biz/img/about/7.jpg');
width: 200px;
height: 200px;
transition: transform .5s linear;
transform-style: preserve-3D;
}
.box:hover {
transform: rotateY(180deg);
}
<div class="box"></div>
You can use CSS3 for this, but there are some browser issues:
transform: rotate(180deg);
Also look here: CSS3 rotate alternative?
Is it possible, and if so how, to change the background color on an HTML checkbox? I'm specifically talking about the white box that is behind the little check symbol.
I've searched quite a bit on this but haven't found a conclusive answer yet.
Only using scripts you can achieve a cross browser solution, see an example here of a styled checkbox....
It is using jQuery UI to change the style
I doubt that is possible since the check box appearance is OS-specific anyway (my checkboxes have a shaded gray background, not a white one).
A solution could be to build your own checkbox using JavaScript and some graphics.
AFAIK only Opera supports the "background" CSS statement for formular elements.
For further information, check this out: http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/
Jeff B showed another way to color a checkbox. He also provided a jsfiddle example.
The idea is to wrap a span and use a png image with some javascript and css.
I am implementing the colour Check box I thought it will be easy to do the color check box but when I started to implement it. it was so time taken Job to do the first time. below is the HTML and CSS for the COLOUR CHECK BOX any one can customized as well this HTML and CSS.
HTML :-
<div class="squaredThree left">
<input type="checkbox" value="None" id="squaredThree" name="check" />
<label for="squaredThree"></label>
</div>
CSS:-
.squaredThree {
width: 20px;
position: relative;
}
.squaredThree label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background:#f7f7f7;
border:1px solid #6d7279;
}
.squaredThree label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 9px;
height: 5px;
background: transparent;
top: 2px;
left: 2px;
border: 3px solid #0b9dda;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.squaredThree label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.squaredThree input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}