I prepared this little series of screenshots two years ago. When these pictures were made, I didn’t know anything about fancybox, so I just shared it using Ubuntu One, which is now dead.1
Now, with fancybox, the effects of these commands can be compared below. Click on the left and right arrows in the pop-up window to see the little difference in spacing.
As can be seen from the slideshow of pictures, the fourth figure resembles the first one the most.
I’ve found a quicker way to crop images. In the past, using GIMP for shrinking pictures would result in an image size larger than using ImageMagick. However, I didn’t know a way to get the coordinates of the image file inside an image viewer, so I couldn’t supply them quickly to ImageMagick’s command line utility. Now, realising that GIMP can be regarded as an image viewer, this problem can be quickly solved.
Finally, with my experience of writing for loops in bash, it didn’t took me long to type this loop.2
$ for i in {1..4}; do convert $i.png -crop 940x615+160+370 $i\_crop.png; done
For the link to the related post in the offical blog, you may go to the first footnote of one of my recent posts in Blog 1: GitHub Page Build Failure. ↩
Refer to Concatenate Loop Variable’s Value and a String in Bash in Blog 1 if you want to know when, why and how I know to put a backslash ‘\’ behind the loop variable. ↩
Downloaded from History of the Apple Logo.1
Thanks to Ruiz’s GIMP tutorial on Mbrsolution, I can remove the white background of the picture on the left.
It’s a brief summary of the referenced tutorial. To save time, I won’t post screenshots here. You may refer to those in the tutorial.
I’ve found Mrchief’s answer to Web_Designer’s question on Stack Overflow useful.3
Inspired by ParaImage’s tutorial on Hong Kong Silicon,
I’ve written a small and simple HTML file to practice the concepts
learnt from Stack Overflow and HK Silicon.
(Click “download” for viewing the HTML code in a web browser.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Image Backgrounds</title>
<style type="text/css">
img {
-moz-box-shadow:0 0 0 10px 20px rgba(0, 255, 0, .5);
-webkit-box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
box-shadow:0 0 10px 20px rgba(0, 255, 0, .5);
display: block;
margin-left: auto;
margin-right: auto;
}
body {
background-color: rgba(0, 255, 255, .1);
}
h1 {
text-align: center;
color: rgba(255, 214, 0, .9);
}
</style>
</head>
<body>
<h1>An image with white backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-2.jpg" alt="white bg"></p>
<h1>An image with transparent backgroud</h1>
<p><img src="/images/posts/GIMPTransparentBg/apple-logo-3.png" alt="transparent bg"></p>
<p>
<a href="//validator.w3.org/check?uri=referer"><img
src="/images/valid-html401.png" alt="Valid HTML 4.01 Strict"
height="31" width="88"></a>
<a href="//jigsaw.w3.org/css-validator/check/referer"><img
src="/images/valid-css.png" alt="Valid CSS" height="31" width="88">
</a></p>
</body>
</html>
Using Firefox, I can dynamically change the width and displacement of the shadow of an image by choosing “Inspect Element” and hitting arrow keys.