gora

المشاركات

عرض الرسائل ذات التصنيف css

HTML5 Video Player with Custom Controls using JavaScript

ديسمبر 04, 2017

Hi! Today let's see how to build html5 video player with custom controls using javascript . The only way to embed videos on webpages before the introduction of html5 is through the use of add-ons such as flash. But thanks to html5, you can insert video contents using native html markup alone. The <video> </video> element in html5 offers a standard way to include video files on web pages. It is supported by all html5 compatible browsers. Currently, HTML5 supports three types of video formats and they are MP4, WebM, and Ogg. Among the three, MP4 is compatible with all major browsers. Creating Video Player in HTML5: To embed video in an html page, use the <video> element like this, <video width="640" height="360" controls> <source src="videos/flying-seagull.mp4" type="video/mp4"> <source src="videos/flying-seagull.ogg" type="video/ogg"> Your browser does not support ...

قراءة المزيد

Create Round Social Media Icons / Buttons using CSS

ديسمبر 01, 2017

Hi, in this post we'll see how to create round social media icons using pure CSS3 . We all know how much impact do social signals have on websites and blogs. Here I'll show you the way to create clean and neat social media icons without images using a vector font library called Font Awesome. Font Awesome is the best icon font available and relatively easy to implement in your websites. They are highly scalable icons which means the social media icons we create will look good even in bigger size. How to Create Social Network Icons with CSS? To create these css social media icons, all we want to do is 1. Create some css styles, 2. Use Font awesome in those styles to draw up the icons and 3. Apply them to <a> anchor tag. No need to add <div>. You don't even have to download the fonts to use it in your website or blog. Just place the below <link> tag inside the <head> section of the HTML file. <link href="//netdna.bootstrapcdn.com/fo...

قراءة المزيد

How to Add Photo Frame Effect to Images using Pure CSS

نوفمبر 30, 2017

Turn your plain website/blog images into an eye candy thing. CSS can be used to apply stylish image effects . Here is a pure CSS trick to apply photo frame effect to images . No need to completely rely on Photoshop to enhance the appearance of images anymore. Here are the advantages of using css for image effects: There is no need for any image processing software. No image customization required. This CSS style can be used to any image irrespective of its size and type. Don't want to worry about positioning the images; and it maintains the image aspect ratio. The CSS styles can be tweaked later to suit your needs without bothering the html pages. How to Create Photo Frame Effect with CSS? To pull off the photo frame image effect, we just wrap our <img> tag inside a <div> block. Add a background texture image using "background" property to serve as a photo frame. To make it realistic, we add some "box-shadow" which makes the edges...

قراءة المزيد

10 Amazing CSS Drop Cap Effects you can Copy Paste

نوفمبر 30, 2017

Hi! Today I have come up with some really cool and easy Drop Cap Effects using CSS. You can straight away copy paste the styles and use it, no tweaks required. Earlier we have tried some cool image effects . This time we are going to style the drop caps with few lines of CSS code. Drop cap is a large character at the start of an artilce, section or paragraph which is very common on publishing medias. We’ll take full advantage of CSS text-shadow property to style the drop caps. Come, let’s start exploring. How to Create Drop Cap using CSS? We can create a simple drop cap effect with first-child and first-letter pseudo elements. The HTML markup consists of no special code. Just we wrap a set of <p> tags within a <div> block. We want only the first line, first character to be a DROP CAP letter. We’ll add some basic CSS code to the <div> block to reset the default styles. CSS Code div { margin: 0; ...

قراءة المزيد

Stylish Bootstrap Sidebar Menu Example

نوفمبر 29, 2017

Bootstrap Sidebar Menu Example: Earlier in one of our tutorials we've discussed about Creating Bootstrap Horizontal Navbar . In this tutorial we'll see how to create sidebar menu in bootstrap . The Bootstrap Sidebar Menu or otherwise called as Bootstrap Vertical Navigation Menu is a list of menu items or links, stacked vertically. It can be placed left or right hand side of the website. Apart from the appearance, it is very similar to horizontal menu and is used to provide easy way of navigation through the website. Bootstrap Sidebar Menu Example For this tutorial, we build a customized Dashboard Menu with Bootstrap . This Dashboard Menu (i.e, bootstrap vertical navigation bar) is going to contain a list of stacked up links along with suitable icons to each item in the list. To add menu icons we use Glyphicons. Glyphicons is the icon font that comes with Bootstrap3 and is present inside the 'font' folder of Bootstrap files. Recommended Read: Add Search F...

قراءة المزيد

How to Add and Customize Twitter Bootstrap3 Breadcrumbs

نوفمبر 29, 2017

It's a good practice to add breadcrumbs to websites/blogs to enhance the users to find their way around. Also it indicates user’s location (page) and hierarchy of the page within a website. Twitter bootstrap 3 comes with built-in CSS component for adding breadcrumbs . I'll show you how to add and customize the default bootstrap breadcrumb styles as per your requirement. You will learn about breadcrumb customizations such as changing bootstrap breadcrumbs separator, changing its background color, text color etc. For this tutorial, I assume you already have some basic working knowledge with bootstrap and know how to integrate bootstrap with HTML page. If you are new to bootstrap, here is a good tutorial about Creating Responsive Navbar with Bootstrap 3 which gives you knowledge about integrating bootstrap with HTML. How to Add Breadcrumbs in Twitter Bootstrap? To add breadcrumbs create an unordered list and add the page links you want. Next add "breadcrumb"...

قراءة المزيد

5 Free Black and White Social Media Icons Sets with CSS and HTML

نوفمبر 27, 2017

Hi! In this article I've come up with 5 modern sets of black and white social media icons using pure css3 and html code. As social media plays major role in creating brand awareness, one cannot overlook the importance of implementing social sharing buttons in their websites. And this article is going to help you with five different styles of social icons to use in your websites. Moreover these icons are built without using images which will improve your website's loading speed too. Like my earlier tutorials on pure css social media icons , this post too will use font awesome library. Font Awesome is a scalable vector font library and its icons can be easily customized using css to fit with the rest of your website's theme. It is originally developed for bootstrap but works great with all the other frameworks and even with plain html. Load Font Awesome Library in HTML File To use these css social media icons you need font awesome library. Use this line of code in...

قراءة المزيد

Bootstrap Popover Example with HTML on Hover

نوفمبر 25, 2017

Bootstrap Popover is not just another Tooltip but it has been introduced to display additional information of any element in a web page - something similar to iPad. The real power of the popovers has been their ability to hold images, videos, text or any other html markup. But I haven’t seen anywhere a proper example of bootstrap popovers that reveals their true nature. So many of them are using it like a mere tooltip with some text. But don’t worry. Let me show you here the right example of bootstrap popover with html content. Bootstrap Popover Example with HTML on Hover For this example, I want to display a popover for an image and to show and hide on mouse hover. And that too with html markup. This is how you should create it. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Popover Example</title>...

قراءة المزيد

How to Create Responsive Multi Level Drop Down Menu in Bootstrap

نوفمبر 22, 2017

Hi, I'm back with another one twitter bootstrap tutorials, which discusses about how to create a responsive multi level drop down menu in twitter bootstrap. Building html drop down menu in bootstrap is quite easy as the css framework provides built in components for doing it. But at times you may want to expand the website’s navigation menu into multi-level drop down especially when developing large portals or shopping sites. Unfortunately bootstrap 3.x versions doesn’t provide readymade styles for this but definitely you can accomplish it with some workaround. If you wish to learn to build simple responsive drop down menu in bootstrap then check out this bootstrap dropdown menu tutorial . Creating Responsive Multi Level Drop Down Menu in Bootstrap Though there is no direct way to create multilevel dropdown menu, bootstrap framework is quite flexible and provides excellent base to extend its functionalities. It’s .dropdown-menu css class provides means for adding dropdown...

قراءة المزيد