Image in placeholder html? - javascript

Can I do something like this with pure html and if needed css and javascript:
And when the mouse focuses, it becomes like this:
So I was thinking of an image placeholder. Am I on the right track, or is there a better/more simpler or more straightforward method?
EDIT: Just out of pure curiosity, how would I accomplish this using JavaScript, as all the current answers are all CSS-related?

From my knowledge this is simply CSS background image.
http://www.w3schools.com/cssref/pr_background-image.asp
Have it look there, you can accomplish this by setting its position like here: http://www.w3schools.com/cssref/pr_background-position.asp
You can also change the background image depend on if the item is focused or not simply showing the back ground image when focused and hiding it when its not like:
#item:focus{
bacground image code here
}
More details on focus here: http://www.w3schools.com/cssref/sel_focus.asp
And some focus usage example: http://www.mozilla.org/access/keyboard/snav/css_usage.html
UPDATE WITH RESOURCE - THANKS #MrMisterMan
http://developer.mozilla.org/en/CSS/background-image
http://developer.mozilla.org/en/CSS/background-position
JAVASCRIPT:
Using JavaScript add the attribute to your element like below:
This will call your function when it has focus and pass it the input element.
Also you can detect onfocusout
Hope this helps, any questions just ask :)

If you only need to support the latest Browser use this:
HTML:
<input placeholder="Google Custom Search" type="search" name="q">
CSS:
#myInput::-webkit-input-placeholder {
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput::-moz-placeholder {
/* Firefox 19+ */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-moz-placeholder {
/* Firefox 18- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
#myInput:-ms-input-placeholder {
/* IE 10- */
color: transparent;
text-indent: -9999px;
background-image: url("http://placehold.it/150x20");
background-position: 0 50%;
background-repeat: no-repeat;
}
JSFiddle
Browser Support

If you need an image (google logo in the question) you should set the placeholder image as the background of the text field:
input.search {
background-image: url("placeholder.gif");
background-repeat: no-repeat;
}
input.search:focus {
background-image: none;
}
Note: :focus is a pseudo-class in css, which is activated on focus

You may use just CSS.
You can give a solid border with say 4px width.
You can make round corners foor your input using moz-border or webkit-border radius.
You can use a border background image.
here you can read about css3 borders http://www.w3schools.com/css3/css3_borders.asp
You may try
input {
border:2px solid #dadada;
border-radius:7px;
font-size:20px;
padding:5px;
}
input:focus {
outline:none;
border-color:#9ecaed;
box-shadow:0 0 10px #9ecaed;
}
Here is the working fiddle

Related

How to make all images look same

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:
clip: rect(0px,60px,200px,0px);
but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
CSS:
.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}
.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;
}
.ribbon{
vertical-align:center;
}
What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem
You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set
Edit 1 -
If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/
img { width: 14%; }
You can also use css property background-size set to cover, and set the images using css background-image property like this:
.image {
width: 250px;
height: 250px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.i1 {
background-image: url("http://ia.media-imdb.com/images/M/MV5BMjE4NDMwMzc4Ml5BMl5BanBnXkFtZTcwMDg4Nzg4Mg##._V1_UY317_CR6,0,214,317_AL_.jpg");
}
.i2 {
background-image: url("http://feelgrafix.com/data_images/out/20/932835-gerard-butler.jpg");
}
<div class="image i1"></div>
<div class="image i2"></div>

Generate outline effect on image using css3

How can I generate in realtime this outline effect similar to this image using css3 or javascript?
http://i.imgur.com/1OEnuKF.jpg
Here is an similar effect achieved with filter and background-blending
div {
width: 180px;
height: 400px;
display: inline-block;
}
.test {
background: url(http://i.imgur.com/1OEnuKF.jpg), url(http://i.imgur.com/1OEnuKF.jpg);
background-position: 0px 0px, 3px 3px;
background-size: cover;
background-blend-mode: difference;
-webkit-filter: blur(1px)invert(1);
}
.target {
background: url(http://i.imgur.com/1OEnuKF.jpg);
background-position: top right;
background-size: cover;
}
<div class="test"></div>
<div class="target"></div>
The left part of the image is achieved from the original image; the right hand is the target image.
there are some filter effects in CSS3 , only for webkit
I've no idea how to use them to make the effect you showed
but I think they can help
here is a link that you can test CSS3 filters and get the css code
http://html5-demos.appspot.com/static/css/filters/index.html
and here you can see it's Browser compatibility
hope that help's

Image hover - Change effects

I'd actually want to change an image when someone hovers the mouse over the image.
Lets say I have an image:
<img src="image.png"/>
I want to change it with the following effects on hover:
The image should be clickable, so it should be a link which redirect users to another page
The image's background should be black-ish, with opacity
On the image it should appear an other image in the middle
How is it possible to do it?
I suggest that you create a link <a class="my-image">foo</a> and use css to get the rollover effect. CSS rollover tutorials are easy to find with a google search and this solution would be the most elegant, semantic and seo friendly you could achieve- without using javascript.
example code from http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/
a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}
a:hover {
background-position: 0 -30px;
}
you can make it like this:
<a class="superimage" href="http://yourlink.com"></a>
and the CSS:
.superimage {
background-image: url(superimage.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
opacity: 0.8;
}
.superimage:hover {
background-image: url(superimageonhover.jpg) no-repeat 0 0;
display: block; //or inline-block
height: (image height)px;
width: (image width)px;
}
more help? just ask

jquery tablesorter CSS arrow icons

This is really more of a CSS question than a jQuery question. I'm using the tablesorter jQuery plugin to sort tables dynamically.
Here's what it looks like currently:
Here's the CSS code that I'm using:
th.sortable{
font-weight: bold;
cursor:pointer;
background-repeat: no-repeat;
background-position: center right;
}
th.headerSortUp {
background-image: url("arrow-up.gif");
}
th.headerSortDown {
background-image: url("arrow-down.gif")
}
The problem that I have with the current implementation is that the arrow is way over on the right of the header. In the above example, the table is being sorted by level, but it almost looks like it could be by location.
Is there an easy way to move the arrow over to the left, so it's directly to the right of the end of the "level" label?
Place a span tag in your th and style it with:
th.headerSortUp span {
background: url("arrow-up.gif") right center no-repeat;
padding-right: 15px;
}
th.tablesorter-headerUnSorted {
background-image: url(/share/css/contextmenu/images/sort_both.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-header {
background-image: url(/share/css/contextmenu/images/sort_both.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-headerDesc {
background-image: url(/share/css/contextmenu/images/sort_desc.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
th.tablesorter-headerAsc {
background-image: url(/share/css/contextmenu/images/sort_asc.png);
background-repeat: no-repeat;
padding-right: 20px;
background-position: right;
}
Try this:
th.headerSortUp span{
background: url("arrow-up.gif") right center no-repeat;
padding-right: 20px;
}
th.headerSortDown span{
background: url("arrow-up.gif") right center no-repeat;
padding-right: 20px;
}
And add span to your th
Edit: Changed div to span (see coments below)
In my case, this worked:
table.tablesorter th.tablesorter-headerSortUp {
background-image: url(../images/asc.gif);
}
table.tablesorter th.tablesorter-headerSortDown {
background-image: url(../images/desc.gif);
}
Style.css downloaded from web cantained only headerSOrtUp class, but this works only with tablesorted-headerSortUp class, so they must have changed it.
Hope it saves some time to someone.
If you cascade their stylesheet, it will look exactly the way it looks on the TableSorter site. You don't even need to move it from their package. Just add this line after your style sheet declaration:
<link href="[YOUR PATH TO]/tablesorter/themes/blue/style.css" rel="stylesheet" type="text/css" />
I was just missing the "tablesorter" class added to table. I added it and it solved. May this help somebody :)

Best way to make text look fading away

I am creating an image effect where the text at the bottom of a paragraph fades away
This is the effect I'm trying to achieve:
I have some working HTML & CSS which achieves this look but I am looking to see if there is a better way to achieve this effect? I've often found that there are HTML tricks to do what I want that I dont know of.
I'm open to using JQuery if it has the ability to do this effect but a native HTML CSS effect would be best. Plus is my solution cross browser?
<html>
<head>
<title> </title>
<style type="text/css">
<!--
body {
background-color: blue;
text-align: center;
margin: 0 auto;
padding: 0 auto;
}
#mainContent {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
}
.textContainer {
width: 800px;
height: 500px;
margin: 0 auto;
padding: 0 auto;
position: relative;
}
.recipeContentOverlay {
z-index: 5;
position: absolute;
left: 0;
top: 80px;
}
-->
</style>
</head>
<body>
<div id="mainContent">
<div class="textContainer">
<h2 class="recipeText">Ingredients:</h2>
<p class="recipeText">Have you ever had broccoli rabe (pronounced "rahb" or "rah-bee" depending on where you are from)? I have sort of a love hate relationship with it. It looks like broccoli, but it doesn't taste like it. Broccoli rabe can sometimes be so bitter, even with blanching, there's no amount of vinegar or bacon that can save it. But bitterness heightens flavors</p>
<img class="recipeContentOverlay" src="images/overlay.png" width="100%" height="200px"/>
<!-- The idea is to get the above image to sit slightly over the top of the above "p" element so that some of the text
fades away. Is there a better way to acheive the same look/effect? -->
</div>
</div>
</body>
</html>
You can achieve this with Cufon, a legal way to embed [almost] any font into a webpage through Javascript. You'd just include the Cufon API as usual, and your Javascript code would look like this:
Cufon.replace('.paragraph', { color: '-linear-gradient(black, blue)' });
What this does is select the element with class "paragraph" (CSS selectors can only be used if you have a library that supports it on your webpage too, like jQuery and sets its color to a linear gradient. In this case I made it go from black to blue so that by the end it blends in with your background color (according to the image you showed us, that is).
I'll get a live demo up soon.
Fair warning though, text fading into the background is not exactly user friendly. It's up to you whether you'd like to continue using it. I do admit it's a nice effect, but only when it's still perfectly legible.
Try something like this. Basically we use CSS gradients and opacity to set the color.
http://jsfiddle.net/V45LW/
You can use a site like this one to help with getting the css written. Basically what you do is absolutely position a div at end of paragraph of fixed height. We apply a gradient opacity change to it.
div.fade {
position: absolute;
bottom: 0;
height: 45px;
width: 100%;
background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,185,232,0)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(125,185,232,0) 0%,rgba(30,87,153,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

Categories