Month: April 2013

Music

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Apart from doing front-end, I also love making music. Never been a pro, but still I love messing with my guitars. So, here are a some of my music endeavors.

Advertisements

Saying That Your Website is Under Construction in a Stylish HTML5, CSS3 and JavaScript Fashion

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

My new AcidJs.ComingSoon component is my proposal to say that your website is “under construction” in a tasteful fashion. It is stylish and lightweight, fully HTML5/JavaScript/CSS3/AJAX driven, fully customizable, imageless and fun to use.

coming-soon

Key features

  • Lightweight and operating entirely on the client.
  • Built with the latest technologies, as your future website will be.
  • Fully customizable.
  • Stylish and flexible.
  • Easy to modify and fun to use.
  • Your way to say in stylish manner that your website is “under construction”.

Click here to view the demo and you will love it so much, that you will download and give it a try immediately.

Enjoy the weekend!

Related Posts

How to Create an Inline Masked File Upload Form with CSS3 and HTML5

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

The post for today is not something really special or super amazing. It’s just a quick and dirty trick that I use when I have to create inline forms for selecting files in which the actual input is hidden, and users click some text node (link, button, etc) that opens the browse for file dialog, which I wanted to share with you.

The Markup:

<div class="css3-inline-file-input">
    <form action="./" enctype="multipart/form-data" method="post" name="form-01">
        <input type="file" accept="image/jpg, image/jpeg, image/gif, image/png, image/bmp" name="form-01-file" /><span>Choose File</span>
    </form>
</div>

The CSS:

.css3-inline-file-input,
.css3-inline-file-input *
{
    display: inline-block;
}

.css3-inline-file-input *
{
    margin: 0;
    padding: 0;
    border: 0;
}

.css3-inline-file-input form
{
    position: relative;
}

.css3-inline-file-input input
{
    position: absolute;
    right: 0;
    cursor: pointer;

    filter: alpha(opacity=0); /* opacity fix IE6/7/8 */
    -moz-opacity: 0; /* opacity fix for older Firefox */
    -webkit-opacity: 0 /* opacity fix for older Chrome */;
    opacity: 0;
}

.css3-inline-file-input
{
    width: auto;
    vertical-align: top;
    overflow: hidden;
}

.css3-inline-file-input span
{
    display: block;
    text-align: center;
    text-decoration: underline;
}

.css3-inline-file-input input:hover + span
{
    text-decoration: none;
}

/* fixes for IE6/7 */
* html .css3-inline-file-input,
* html .css3-inline-file-input *,
* + html .css3-inline-file-input,
* + html .css3-inline-file-input *
{
    display: inline;
}

Older versions of Internet Explorer do not fire the onchange event on elements, hidden with CSS display: none or visibility: hidden, but instead an exception is thrown. This is why I used opacity: 0 and position: absolute to hide he original input.

You can check and download the demo on this page.

Enjoy the rest of the day!

Related Posts