<html>
<head>
<title>Ascii</title>
<style>
body{
line-height:1px;
font-size:1px;
}
</style>
</head>
<body>
<?php
function getext($filename) {
$pos = strrpos($filename,'.');
$str = substr($filename, $pos);
return $str;
}
if(!isset($_POST['submit'])){
?>
<form action="<?echo $_SERVER['PHP_SELF'];?>" method="post">
JPG img URL: <input type="text" name="image"><br>
<input type="submit" name="submit" value="Create">
</form>
<?
}else{
$image = $_POST['image'];
$ext = getext($image);
if($ext == ".jpg"){
$img = ImageCreateFromJpeg($image);
}
else{
echo'Wrong File Type';
}
$width = imagesx($img);
$height = imagesy($img);
for($h=0;$h<$height;$h++){
for($w=0;$w<=$width;$w++){
$rgb = ImageColorAt($img, $w, $h);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
if($w == $width){
echo '<br>';
}else{
echo '<span style="color:rgb('.$r.','.$g.','.$b.');">#</span>';
}
}
}
}
?>
</body>
</html>
I can’t take any credit for this…. I saw it over at PHPSnips and thought it was cool
Today (at my Day Job) I had the task of taking a PSD and slice it up ready to go into a CMS. For the first time I decided it was time to start using some css3 and html5.
Everything was running smoothly until I hit the main navigation. Each navigation item needed to have an oval background on hover. See below.
Please excuse my dodgy paint drawing…. I’m on my girlfriends laptop at the moment with no photoshop.
After an hour or two’s research I found the perfect concoction. I’m going to explain below how to take a block level element and make the corners rounded.
I’m going to write all the code and comment it so you can see where I’m coming from.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
<style type="text/css">
div#roundMyCorners {
width: 200px;
height: 200px;
background-color: red;
border: 1px solid black;
/* The above is just some styling to give the target some dimensions and colours to work with */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
/* The above will give #roundMyCorners 6px radius'd corners in firefox/safari/chrome etc.*/
/* This is all that is needed for the above browsers */
}
</style>
<!-- There is no Internet Explorer compatable CSS rules for rounded corners so we'll use a nice simple jQuery plugin -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<!-- Reference jQuery from CDN -->
<script type="text/javascript" src="http://www.methvin.com/jquery/jquery.corner.js"></script>
<script type="text/javascript">
///once document is loaded & browser is Internet Explorer
if($.browser.msie) {
$(document).ready(function(){
///SELECTOR .Corner object method
$('#roundMyCorners').corner();
});
}
</script>
</head>
<body>
<!-- This is the target -->
<div id="roundMyCorners"></div>
</body>
</html>
Thanks to Chris @ Css-tricks.com for his html5 page structure.
A while back I spent about 3 days wondering why some of my images weren’t being displayed on a particular clients computer.
There was nothing out of the ordinary, he was running Window’s Vista and Internet Explorer 8. What we didn’t realise was that because I’d placed said images inside a folder named “banners” and said computer was running behind a networked ad blocker. My images weren’t getting through.
Attached is a PDF containing all varieties of deviation NOT allowed by different ad blockers. I hope this comes in handy as much to you as it did me.
PDF Can be downloaded form here: blocked images.
Keith Clark, an independent web developer from the UK, has developed a JavaScript solution to IE’s CSS3 shortcomings in relation to CSS3 selectors. CSS3 selectors became the first W3C module to reach proposed recommendation status back in December 2009.
His ie-css3.js project (currently in beta) allows Internet Explorer, versions 5 through 8, to identify CSS3 pseudo-class selectors and render any style rules defined with them. All this is achieved by simply including the script, along with Robert Nyman’s DomAssistant, within the head element of your web pages.
Supported Pseudo-Classes
- :nth-child
- :nth-last-child
- :nth-of-type
- :nth-last-of-type
- :first-child
- :last-child
- :only-child
- :first-of-type
- :only-of-type
- :empty
Limitations of the project
- Style sheets MUST be added to the page using atag. Page level stylesheets or inline styles won’t work. You can still use @import in your style sheets.
- Style sheets MUST be hosted on the domain as the page.
- Style sheets using file:// protocol will not work due to browser security restrictions.
- The :not() pseudo-class is not supported.
- The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won’t be reflected.
How does it work?
ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseudo-class selectors. If a selector is found it’s replaced by a CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, Robert Nyman’s DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.
Finally, the original stylesheet is replaced with the new version and any elements targeted with CSS3 selectors will be styled.
Bypassing IE’s CSS parser
In accordance with the W3C specs, a web browser should discard style rules it doesn’t understand. This presents a problem — we need access to the CSS3 selectors in the style sheet but IE throws them away.
To avoid this issue each style sheet is downloaded using a XMLHttpRequest. This allows the script to bypass the browsers internal CSS parser and gain access to the raw CSS file.
.rotate {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<p class="rotate">This text would be rotated</p>
The example above rotates text 90 degrees counterclockwise.
The rotation property of Internet Explorer’s BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degress respectively.
