3 Of The Best Web Editors For Mac
Most of us these days use a Mac, and they are pretty good in everything they do, there’s just one problem, it’s hard to find a decent free web editor for use on a Mac. Well, help is at hand! In this post I will show you 3 of the best web editors for this OS.
I personally use Amaya on my Mac, it’s one of the best web editing experiences I have ever had. In fact who needs Dreamweaver, when you’ve got Amaya? The editor doesn’t just act as a web editor, but also a web editor. Incudes WYSIWYG.
In my opinion, and the words of others KompoZer is also a good WYSIWYG editor, but personally – it’s not as good as Amaya. KompoZer is likely to be a favourite amongst those who where fans of the Nvu software package. They are both quite similar.
Aptana Studio is one of the most advanced web editors out there, it too is almost influenced by Dreamweaver, it’s hard to believe it is free!
Make A CSS Circular Search Box
Well, It’s been a while since I last posted on this blog. (I swear – I’m gonna have to start posting more)! So in this post – I thought it was time I covered another HTML / CSS tutorial. In this post, I will show you how to make a circular search box for your site, just like the one below:
Screenshot taken from my theme: Super Awesome Red. Available soon on this blog!
So, it looks hard to make is it? No. All it is - a text box placed over an image (with margins – using CSS.)
So:
Step 1:
Download the image below – DONT CHANGE THE NAME!
Step 2:
Create a directory on your host (or computer), with this layout:
img – directory
index – html file
style – css file.
With the image above downloaded, save this to the img directory.
Step 3:
Create a CSS file with this code: (style.css)
#search{
float:right;
background-image:url(img/searchframe.png);
background-repeat:no-repeat;
background-position:center;
}
input.pink {
background-color: #FFF;
font-size: 17px;
font-family:Verdana;
color:#333;
border-color:#FFF;
border-width:thin;
border-style:none;
margin-left:45px;
margin-top:10px;
margin-bottom:10px;
margin-right:15px;
}
Step 4:
Now, it’s time to bring it all together in the html file (index.html):
<div id="search"> <input class="pink" type="text" name="T1" size="13"> </div>
And that will give you the final result! You can downlaod the files below:
