Ajax file upload in modal window. Do you publish your blogs with WordPress?
If yes, you know the inline popup window which opens if you like to upload / insert an image into your article. This tutorial shows you how-to use the jQuery Plugin ThickBox and some jQuery code to upload a file and pass a value to the parent page. You can use this function in your custom CMS or maybe you like use this code snippet as the basic code for your own Ajax file upload plugin or gadget?
Scripts and libraries for the Ajax file upload PHP Upload Class / Script We use this PHP Script provided by our partner site finalwebsites.com because it’s very powerful and easy to use. jQuery JavaScript Library There are several client side libraries available on the Internet, I like jQuery because there are many resources and cool plugins. ThickBox – webpage UI dialog widget I tried several Lightbox types and since a while I use the ThickBox plugin.
Our dynamic form (form.php) The upload script (upload.php) Creating a modal window with HTML5 & CSS3. Modal boxes are a frequently utilized tool in the web developer’s arsenal.
Used for, amongst many things, login/register forms; advertisements; or just notifications to the user. However despite the fact that modal windows frequently contain mission critical information, they are routinely created with JavaScript, which does not sit well with the best-practices of progressive enhancement or graceful degration. This doesn’t need to be a problem, because HTML5 & CSS3 allow us to create modal windows with ease.
Demo What we are going to do is use CSS3’s transition, opacity, pointer-event, and background gradient properties to create a very beautiful and functional modal box. You can view a demo here. Creating a modal window with HTML5 & CSS3. HTML input accept Attribute. CSS Image Hover Overlay. Responsive Image Grids Using CSS Tutorial. Today we’re going to build a responsive image grid using CSS.
No fancy dancy JavaScript or frameworks needed, just good ‘ole HTML and CSS. Image grids are used all over the web – for pictures, products, profiles… you name it! Why? Because they’re a great solution for displaying rows and columns of visual data. Now that we know why they’re useful, let’s dig in! The HTML Our HTML is a simple unordered list with the class of rig – <ul class=”rig”>. <ul class="rig"> <li> <img src="images/pri_001.jpg" /> <h3>Image Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit... The CSS Now that we have our markup, we’ll add some styling to make our grid responsive. 1) Display vs. Normally, most web developers would float to get a “grid effect.” 2) Math & Margins The whole point of responsive [or fluid] grids is to do perfect math. Now we need a little math to figure out the li widths for each grid: Now that we have our li widths, we’ll create 3 separate classes for them.
CSS Overlay Techniques, How to create an overlay in css. Transparent Image Overlay The following CSS code shows how to transparent color overlay on images.
Also you can see how to overlay one div over another div. Move mouse over the image... Overlay a transparent div on an image Source Code Transparent Background Images In CSS, there is no property such as transperancy. CSS Box Shadow. Used in casting shadows off block-level elements (like divs).
The horizontal offset of the shadow, positive means the shadow will be on the right of the box, a negative offset will put the shadow on the left of the box.The vertical offset of the shadow, a negative one means the box-shadow will be above the box, a positive one means the shadow will be below the box.The blur radius (optional), if set to 0 the shadow will be sharp, the higher the number, the more blurred it will be.The spread radius (optional), positive values increase the size of the shadow, negative values decrease the size. Image hover effects - Gadgetronicx.
Design Considerations: Text on Images. By Chris Coyier On I enjoyed Erik D.
Kennedy's post 7 Rules for Creating Gorgeous UI (Part 2). In it, his Rule 4 is: Learn the methods of overlaying text on images. I thought we could take a look at all his points, code them up, and note anything that comes up technically. Tinting The image should be dark, and not have a lot of contrast-y edges. Picking an image is up to you, but let's say it isn't particularly dark. See the Pen Darken Image with Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen. And while a black overlay is simplest and most versatile, you can certainly find colored overlays as well.
Animate text over images on hover without JavaScript. A couple of months ago, I published a tutorial showing how to show text over images on hover without using JavaScript.
When I presented to an HTML5 Meetup Group a couple of weeks ago, I took that idea and ran with it, adding some extra special animations, and I’ll show you how to do it too.