I am practicing using various image replacement methods and recently came across a couple articles discussing a new, supposedly more efficient method by Scott Kellum.
Original website article regarding this new method
It seems good and I would like to practice using it, but am not to sure what the html and css for it should be. So in the example below, I have an h1, with the example logo text inside. Then I added a class of .hide-text to my h1 and styled it with CSS. I used a photoshop logo image I made and set that as the background image....the image has a width of 203px and a height of 57px.
Question 1:
When I tested my code in the browser, everything seems to be working fine, however is my usage of Mr.Kellum's image replacement technique correct?
Question 2:
Should I target the h1 in the css and declare the width and height or is it okay to include the width and height directly in the hide-text class like in my example below?
<style>
.hide-text {
background: url(images/mylogo.jpg) 0 0 no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 203;
height: 57px;
}
<body>
<h1 class="hide-text">MyLogo text</h1>
</body>
Any help is greatly appreciated. Thank you community!
I have found the css image replacement museum while searching for the actual trends on image replacement. I met the Scott Kellum method's there. After that I found this question - so I'm not an expert using this technique - and i want to share my opinion about.
Implementation copy-pasted from the link above
Simple, as also posted on the question.
<h3 class="skm">CSS-Tricks</h3>
CSS
h3.skm {
width: 300px;
height: 75px;
background: url(test.png);
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Implementation as I would do it
I've read the original article and i think it's better to split the css code for reusability. Maybe we'll replace with images more than a single element.
<h1 class="ir">An awesome pretty title</h1>
<h2>Some words here not replaced with images<h2>
<nav>
<!-- some links replaced with images that also use css sprites -->
<a class="ir" href="#">home</a>
<a class="ir" href="#">sweet</a>
<a class="ir" href="#">home</a>
</nav>
Reusing the ir class for the image replacement technique, as suggested on the post you linked on the question, keeps things tidy.
.ir {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
h1 {
background-image: url('/the-title-replacement.png'');
width: /*the-image-width*/px;
height: /*the-image-height*/px;
}
nav a {
background-image: url('/the-menu-icons-sprite.png');
width: 24px;
height: 24px;
}
nav a { background-position: 0 0; }
nav a + a { background-position: 0 24px; }
nav a + a + a { background-position: 0 48px; }
Conclusions
The image url & the size must be set for each replaced element. If we are using sprites the background position also comes in play for each element, though the element size is often shared between all the elements.
All of this use cases can benefit from splitting the css code, keeping the stylesheet tidier.
NOTE: I've made these thoughts for a pure css implementation. Using a css preprocessor - such as less for example - changes the rules.
NOTE 2: Another trending method is the proposed by the H5BP team. I am undecided about which to use.
Related
I have a png with blue lines, a transparent background and nothing else. Is there a way in css to make the lines white?
CSS is used to modify the appearance of HTML. It cannot really affect an image directly. You could use two images of the same size, and use JavaScript to switch between them.
Here's one possible way to do this:
HTML
<body>
...
<div>
<image id="blue-img" class="currentFrame" src="/img/blue.png" />
<image id="white-img" class="hiddenFrame" src="/img/white.png" />
</div>
...
</body>
CSS
.currentFrame {
display: block;
}
.hiddenFrame {
display: none;
}
At this point, you could use the following JavaScript to hide one image and show the other. Because the images are the same size, and appear together in the HTML DOM, it will look like the images occupy the same space.
function changeFrame() {
removeClass("blue-img", "currentFrame");
addClass("blue-img, "hiddenFrame");
removeClass("white-img", "hiddenFrame");
addClass("white-img", "currentFrame");
}
// Add the given class to the DOM element with the given id
function addClass(id, class) {
...
}
// Remove the given class from the DOM element with the given id
function removeClass(id, class) {
...
}
The implementation of addClass and removeClass() functions are left as an exercise for the reader, but it can be much easier if you use jQuery or some other DOM API library.
You could also use the HTML5 <canvas> element, if you're not concerned about backwards compatibility, or if you need a transition animation. That would also involve some JavaScript coding.
You have at least 2 ways to achieve this effect
Option 1: Use the image as a mask
Here only the transparent part of the image is used, as a mask. If you apply it on a white element, the parts not masked will be white
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-color: white;
-webkit-mask-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
-webkit-mask-size: contain;
}
<div class="base">
<div class="test"></div>
</div>
Option 2: use a filter to change the color. For instance, use brightness(100)
.base {
width: 300px;
height: 200px;
background-color: yellow;
}
.test {
width: 300px;
height: 200px;
background-image: url(http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png);
background-size: contain;
-webkit-filter: brightness(100);
}
<div class="base">
<div class="test"></div>
</div>
However, both options have a limited support
Why don't you use the Canvas in HTML5 to create the image on user interface :-
it will give you more clarity as the images are created using px.
it will give you liberty to change in what every color, size you want as they are created using javascript .
I've searched high and low, read tutorials and still have no answer for this :-\
What's best-practice for getting 3 images evenly spaced inside a div (one left, one middle, and one right), and keeping the distance between images appearing even as the browser size is reduced? I have tried using width- and margin-%'s with no luck. Is it more appropriate to use an in-line block solution, and if so, how?
Page in question: http://www.1000hours.co.nz/mtc/
html:
I was unable to post the html here despite reading the guide, I'm not sure why? It's in the revised JSfiddle markup: http://jsfiddle.net/87pgzLf1/
css:
#divcontainer {
float:left;
width:100%;
height:auto;
padding:25px;
margin: 5px;
#iconcontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 5px;
}
#buttoncontainer {
float:left;
width: 100%;
height: auto;
padding: 5px;
margin: 1px;
}
#icon1 {
float:left;
margin-left:20%;
}
#icon2 {
float:left;
}
#icon3 {
margin-right:60px;
float:right;
padding-left:20%;
}
You rule stack exchangers, thanks heaps in advance. Feel free to grab the background images on the page if you like as contribution <3 [disclaimer: this is not a scam but that's up to you to decide. Editors don't hate on people who give please, just because others in the world aren't always trustworthy - I am.]
Here's an update to your jsfiddle:
JSFIddle
I'm not very good with HTML or anything like that so please bear with me! So I'm editing a tumblr theme (that someone else made, not me) and I moved the sidebars from the right to the left, which messed everything on the theme up. I've almost got it looking how I wanted layout wise, but the container won't stretch to match the posts or the page etc. You can see what I mean here (sorry can't post images):
vbthemes.tumblr.com/page
Even on the main page it isn't quite long enough to go down past the pagination.
Ideally I want the container to stretch down to the bottom of the posts/post on the page.
This is the code for the container:
// CONTAINER //
.containerbg{
padding:20px;
margin-left:-40px;
margin-top:29px;
background:{color:containerbg};
padding-top:10px;
width: 880px;
height: 100%;
z-index:-1000;
}
Can anyone give me any tips?
I can provide more of the code if you need, as I said I'm a huge noob.
(the theme was made by themesofcaroline.tumblr.com and i take no credit for it)
I'm having trouble testing this, but this should work.
Add the following css to your theme:
/* -------------------------------
CLEARFIX FLOATING FIXES
---------------------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear { overflow:hidden; clear:both; height:1px; margin:-1px 0px 0px 0px; font-size:1px; }
.clear-simple {clear:both; }
Then add clearfix class to your container. So:
<div class="containerbg clearfix">
Untested but try it.
I am a novice html/CSS programmer who needs to satisfy a very specific set of circumstances.
I have 2 images, both must be aligned vertically by the center of the image. One image must be left aligned and the other must be right aligned. They will be in a max width div but I don't think that should be an issue. As the webpage is shrunk down below the width of the two pictures together, the images then need to be horizontally centered with one image on top of the other. I have added pictures to clarfiy (sorry I would have added as pictures but I have zero rep). The div container and images will all be variable so positioning based upon pixels is out of the question.
So I researched this a ton, but all answers I've found have been partial; not able to do everything I'm looking for. Any ideas?
(http://imageshack.us/a/img819/9515/3zt.gif)
(http://imageshack.us/a/img14/853/qp8.gif)
Research:
I notice my question was -1'd. I guess not providing my research was the fault? Here's some of the methods I tried to fix this issue:
Vertical alignment of elements in a div
How to vertically align an image inside div
How to vertically middle-align floating elements of unknown heights?
Wrap long HTML tables to next line
Edit #2
Another version, I think this is the cleanest I can think of
live view
edit view
Use a css table and vertical-align:middle for the wide screen view, then collapse the table for narrow viewports. The code is clean and it's completely independant of image heights.
================
Edit
As #user2748350 correctly pointed out, my original suggestion below didn't align images vertically on a wide screen if they were different heights.
Here's a variation which is an improvement using vertical-align: middle and inline images. The only requirement is that you set a line height larger than the tallest image:
live view
edit view
===============================================
Original
See if this helps you:
live view
edit view
HTML
<div class="container">
<img src="http://placehold.it/300x150" class="left">
<img src="http://placehold.it/250x150" class="right">
</div>
CSS
.container{
margin: 0 auto;
max-width:1000px;
}
img.left{
display:block;
float:left;
}
img.right{
display:block;
float:right;
}
#media (max-width: 570px) {
img.left{
float:none;
margin: 0 auto;
}
img.right{
display:block;
float:none;
margin: 0 auto;
}
}
In the head of your page, you also want to add
<meta name="viewport" content="width=device-width, initial-scale=1.0">
for good display on mobile devices.
Hope this helps!
Here is quick solution
img {
max-height: 100%;
max-width: 90%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I've tried and tried so hard to overcome this problem the past few days as I just want to get this site launched above all now. I have been developing this for the last week or so and I have been using my specific preferred browser, Google Chrome. Yes, big mistake!
Anyway, here is the demo site which shows what I want near everything to look like (apologies for some things that are out of place, haven't quite finished yet!): http://www.weburton.co.uk/content/demo/
You see the social area? It displays properly in Chrome; exactly as I want it. In IE it displays the div areas, but there are some styling issues such as the text on the Twitter side.
However, the div areas are completely ignored in other browsers it seems; its a strange problem, I'll admit that. I have them encased in a div which has a background image (selenasocial) and then have the other divs floating. Here is the code (CSS):
#selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 555;
border: none;
overflow:auto;}
.selenasocial {
background: url(images/wls/social-bg.jpg) no-repeat top center;
display: inherit;
width: 100%;
min-height: 263px;
z-index: 255;
border: none;
overflow:auto;}
.selenasocial img {
border: none;}
.twitsocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
.facesocial {
float: left;
width: 480px;
padding-top: 10px;
text-align: center;
border: none;}
And here is the HTML, I am using Widgets (and yes, they have been styled correctly in functions.php):
<!-- Selena Gomez Social Networks -->
<div class="selenasocial">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar") ) : ?> <?php endif;?>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Social Sidebar 2") ) : ?> <?php endif;?>
</div>
I overcame the error in IE (as it was happening there, too) by copying the CSS above into a separate IE.css file. I just don't understand why two browsers which are leaps and bounds ahead of IE aren't reading from the main CSS file.
Any help would be HUGELY appreciated - I've been tearing my hair out about this for the past few days.
Thanks in advance!
There's (technically) nothing wrong with your code - the part you posted. You are setting both float properties to left, which I guess is not what you want, but that did not explain why the other properties were getting ignored.
I won't read your 4700-lines CSS file to find what is wrong with it but I will try to help you do it yourself.
The first thing I did was to try to hunt the CSS code you posted with firebug and, to my surprise, it was not there. The very last line of CSS firefug gave me was the 902th which was this:
.clearfix {
zoom: 1;
}
Actually, firebug did not show that zoom thing (the brackets were empty). So I went to the CSS file directly to find it out and, after wondering why would anyone use such non-standardized property, I checked the next lines to find there was a parentheses instead of a bracket in the 907th line.
After finding such error I proceeded to run a CSS validator on your CSS file and results were not very good. Fix those errors and Firefox will draw that properly.
Deciding whether IE and Chrome's capability of interpreting wrong CSS files is actually good or bad is not to be discussed here but learning how to find and correct your mistakes can help you get things to work with stricter browsers.