Skip to main content

List of categories of awesome effects css3 and javascript and Video Players

Here is the list of categories of awesome effects css3 
 
Creative Link Effects 

http://tympanus.net/Development/CreativeLinkEffects/

Website with video Player http://www.videojs.com/
http://www.w3schools.com/html/html5_video.asp
http://dev.opera.com/articles/html5-video-flash-fallback-custom-controls/ Website with video on home page

http://www.bienvillecapital.com/
http://www.theqcamera.com/

Creative Shapes pure css
http://codepen.io/rachel_web/pen/pjzowB


Create your own css 3 styles effect
http://www.createcss3.com/
http://matthewlein.com/ceaser/


Create css for Sprite Images (Retina Friendly)
http://www.spritecow.com/
http://spriteme.org/

Creaive and best websites 

http://interactivewall.ru
http://www.gsconto.com/chronicles/how-it-all-began.html
http://www.fusionessence.com/
http://www.designzzz.com/
http://hverdagsreisen.no/  (best)

HTML 5

Unicode character codes
http://unicode-table.com/en/#003C


Progress bar
 http://tympanus.net/TipsTricks/CSS3TimedNotifications/

Scrollbars with mobile compatibility
http://areaaperta.com/nicescroll/demo.html
http://enscrollplugin.com/

creative works
http://www.behance.net/ (Collection)
http://365awesomedesigners.com/ 
http://www.awwwards.com/  (Collection)


Personal portfolio
http://www.thetrueillusion.com/

html sound game
http://www.pluraldev.com/drumbit/


For Book website
http://tympanus.net/Tutorials/3DShadingWithBoxShadows/
 http://tympanus.net/Development/3DBookShowcase/

Browser Hacks css
http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt
http://codemug.com/html/css-hacks-for-ie6ie7ie8ie9-and-ie10/


Menus
http://cdn.tutsplus.com/net/uploads/legacy/819_megamenu/demo/index.htmlhttp://tympanus.net/Development/MultiLevelPushMenu/index.html
http://tympanus.net/Tutorials/CircularNavigation/index.html
http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/
http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/
http://tympanus.net/Tutorials/YouTubeLeftSideMenu/#
http://tympanus.net/Tutorials/SwatchBook/
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index2.html
http://tympanus.net/Tutorials/BlurMenu/
http://tympanus.net/Tutorials/MovingBoxesContent/
http://tympanus.net/Tutorials/AnimatedContentMenu/
http://tympanus.net/TipsTricks/CSS3MenuHoverEffect/
http://tympanus.net/Tutorials/OverlayEffectMenu/#
http://tympanus.net/Tutorials/CollapsingSiteNavigation/
http://tympanus.net/Tutorials/SlideDownBoxMenu/
http://tympanus.net/Tutorials/CufonizedFlyOutMenu/
http://tympanus.net/Tutorials/LittleBoxesMenu/   JQUERY
http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/          jquery
http://tympanus.net/Tutorials/RockingRollingMenu/   jquery
http://tympanus.net/Tutorials/BubbleNavigation/#      jquery
http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/    jquery
http://tympanus.net/Tutorials/FixedFadeOutMenu/#top    jquery
http://tympanus.net/Tutorials/FixedNavigationTutorial2/     jquery

tab menu
http://tympanus.net/Tutorials/CSS3ContentTabs/

accordion
http://tympanus.net/Tutorials/CSS3Accordion/index.html
http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/
http://tympanus.net/Tutorials/ExpandingImageMenu/
http://tympanus.net/Tutorials/ElegantAccordion/

Page scrolldown effect
http://tympanus.net/Development/HeaderEffects/
http://tympanus.net/Tutorials/ResponsiveHorizontalLayout/
http://tympanus.net/Tutorials/LateralOnScrollSliding/
http://tympanus.net/Tutorials/ScrollbarVisibility/index2.html


Page scrolldown with auto content load like facebook
http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

Animated books
http://tympanus.net/Development/AnimatedBooks/index2.html


Image captions
http://tympanus.net/Tutorials/PseudoElementsImageCaptions/
http://tympanus.net/Tutorials/CaptionHoverEffects/
http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/   (like google images)
http://tympanus.net/Development/StickyCaptionsConcept/
http://tympanus.net/Tutorials/3DHoverEffects/
http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/
http://tympanus.net/Tutorials/CSS3ContentNavigator/index2.html#slide-main
http://tympanus.net/Tutorials/AnimatedTextIconMenu/example1.html
http://tympanus.net/Tutorials/OriginalHoverEffects/

Hover effect
http://tympanus.net/Development/IconHoverEffects/
http://tympanus.net/Tutorials/ItemBlur/

Grid effects
grid loading effect
http://tympanus.net/Development/GridLoadingEffects/index.html
http://tympanus.net/Development/AutomaticImageMontage/index.html
http://tympanus.net/Development/FullscreenGridPortfolioTemplate/
http://tympanus.net/Development/GridNavigationEffects/example5.html#
http://tympanus.net/Tutorials/ImageWall/
http://tympanus.net/Tutorials/SlidingPanelPhotowallGallery/

Grid overlay
http://tympanus.net/Development/CircleFlipSlideshow/

search bar
http://tympanus.net/Tutorials/ExpandingSearchBar/

model window or pop ups
http://tympanus.net/Development/ModalWindowEffects/


Creative buttons
http://tympanus.net/Development/CreativeButtons/
http://tympanus.net/Tutorials/CSSButtonsPseudoElements/index.html
http://tympanus.net/Tutorials/AnimatedButtons/

Animation
http://tympanus.net/Development/PseudoElementsAnimationsTransitions/index.html
http://tympanus.net/Tutorials/CSS3BouncingBall/
http://tympanus.net/Tutorials/jQuerySceneryAnimation/

Creative form
http://tympanus.net/Tutorials/NaturalLanguageForm/
http://tympanus.net/Tutorials/CustomLoginFormStyling/
http://tympanus.net/Tutorials/LoginRegistrationForm/index.html
http://tympanus.net/Tutorials/FancySlidingForm/          JQUERY

page transition
http://tympanus.net/Development/PageTransitions/
http://tympanus.net/Development/FullscreenLayoutPageTransitions/
http://tympanus.net/Tutorials/FullscreenBookBlock/
http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/
http://tympanus.net/Tutorials/FullscreenSlitSlider/index.html
http://tympanus.net/Tutorials/CSS3PageTransitions/index.html
http://tympanus.net/Tutorials/SlopyElements/
http://tympanus.net/Tutorials/LateralOnScrollSliding/
http://tympanus.net/Tutorials/WebsiteScrolling/index_vertical.html

Text animation
http://tympanus.net/Development/OpeningSequence/
http://tympanus.net/Tutorials/TypographyStyles/index7.html
http://tympanus.net/Tutorials/CSS3RotatingWords/
http://tympanus.net/Development/Arctext/
http://tympanus.net/Development/RockingLetters/
http://tympanus.net/Tutorials/SplashComingSoonPageEffects/index3.html
http://tympanus.net/Tutorials/TypographyEffects/
http://tympanus.net/Tutorials/InteractiveTypographyEffects/
http://tympanus.net/Development/SlidingLetters/

icons
http://tympanus.net/codrops/2013/07/31/freebie-famous-landmarks-icon-set-ai-eps-psd/


App Showcase
http://tympanus.net/Tutorials/AppShowcase/index3.html

Creative password technique
http://tympanus.net/Tutorials/HexaFlip/index4.html

Creative time table
http://tympanus.net/Tutorials/InteractiveSVG/
http://tympanus.net/Tutorials/3DTimeline/

Image efect
Flipping effect
http://tympanus.net/Development/CircleFlipSlideshow/
http://tympanus.net/Tutorials/CircleHoverEffects/
http://tympanus.net/Development/HoverClickTriggerCircle/#
http://tympanus.net/Development/FullscreenImageBlurEffect/
http://tympanus.net/Development/CircularDiscographyTemplate/
http://tympanus.net/Tutorials/ScrollingThumbs/
http://tympanus.net/Tutorials/CircularPortfolio/#       jquery
http://www.tympanus.net/Tutorials/PhotoZoomOutEffect/  jquery


Image Gallery
http://tympanus.net/Development/3DGalleryRoom/index2.html
http://tympanus.net/Tutorials/ItemSlider/#
http://tympanus.net/Development/Stapel/
http://tympanus.net/Development/GammaGallery/
http://tympanus.net/Development/PFold/index.html
http://tympanus.net/Tutorials/BigVideoSlideshow/
http://tympanus.net/Development/Unfolding3DThumbnailsConcept/
http://tympanus.net/Development/3DPanelLayout/
http://tympanus.net/Development/3DGallery/
http://tympanus.net/Tutorials/CSS3FilterFunctionality/
http://tympanus.net/Tutorials/ProximityEffect/
http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/
http://tympanus.net/Tutorials/CSS3Lightbox/                   (lightbox)
http://tympanus.net/Development/WaveDisplayEffect/
http://tympanus.net/Tutorials/DraggableImageBoxesGrid/
http://tympanus.net/Tutorials/ResponsiveImageGallery/
http://tympanus.net/Tutorials/PortfolioImageNavigation/
http://tympanus.net/Tutorials/BubblerifficImageGallery/
http://tympanus.net/Tutorials/AnimatedPortfolioGallery/
http://tympanus.net/Tutorials/PolaroidPhotobarGallery/
http://tympanus.net/Tutorials/FullPageImageGallery/
http://tympanus.net/Tutorials/ThumbnailsNavigationGallery/
http://tympanus.net/Tutorials/MinimalisticSlideshowGallery/
http://tympanus.net/Tutorials/FlickrPhotobarGallery/
http://tympanus.net/Tutorials/WonderwallMobileGallery/#albums_container
http://tympanus.net/Tutorials/FreshSlidingThumbnailsGallery/


Image Slideshow
http://tympanus.net/Development/StackSlider/
http://tympanus.net/Development/Baraja/
http://tympanus.net/Development/Windy/index.html
http://tympanus.net/Tutorials/VerticalShowcaseSlider/
http://tympanus.net/Tutorials/TriplePanelImageSlider/
http://tympanus.net/Development/AnimatedResponsiveImageGrid/index.html
http://tympanus.net/Tutorials/PhotoBoothStripsLightbox/
http://tympanus.net/Tutorials/CSS3ImageAccordion/
http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/
http://tympanus.net/Tutorials/SlideshowJmpress/
http://tympanus.net/Development/ParallaxContentSlider/
http://tympanus.net/Tutorials/CSS3SlidingImagePanels/index2.html
http://tympanus.net/Tutorials/ElasticSlideshow/
http://tympanus.net/Tutorials/CircleNavigationEffect/
http://tympanus.net/Development/Elastislide/index3.html#
http://tympanus.net/Development/Slicebox/
http://tympanus.net/Development/CircularContentCarousel/
http://tympanus.net/Development/VerticalSlidingAccordion/example1.html
http://tympanus.net/Development/SlidingBackgroundImageMenu/example6.html
http://tympanus.net/Tutorials/RotatingImageSlider/
http://tympanus.net/Tutorials/SweetThumbnails/
http://tympanus.net/Tutorials/PhotoStack/
http://tympanus.net/Tutorials/PrettySimpleContentSlider/
http://tympanus.net/Tutorials/Billboard/

image slider
http://tympanus.net/Development/3DWallGallery/#26
http://tympanus.net/Tutorials/ThumbnailsPreviewSlider/
http://tympanus.net/Tutorials/PortfolioZoomSlider/
http://baijs.nl/tinycarousel/

image zoom
http://tympanus.net/Development/ImageZoomTour/index.html
Pagination
http://tympanus.net/Development/SliderPagination/

Audio Players
http://tympanus.net/Development/AudioPlayer/
http://tympanus.net/Development/CassettePlayer/
http://tympanus.net/Development/AudioSlideshow/

Drop Down Effects
http://tympanus.net/Development/StackSlider/
http://tympanus.net/Tutorials/CustomDropDownListStyling/index3.html

checkbox
http://tympanus.net/Tutorials/CSS3ButtonSwitches/index3.html
http://tympanus.net/Tutorials/CheckboxActions/

Loading effect
http://tympanus.net/Tutorials/LoadingAnimations/index.html

Box shadow
http://tympanus.net/Tutorials/BasicReadyToUseCSSStyles/#

Exact location
http://tympanus.net/Tutorials/RealtimeGeolocationNode/

Restaurant menu
http://tympanus.net/Tutorials/3DRestaurantMenu/

flipbook/flip effect
http://tympanus.net/Development/BookBlock/
http://tympanus.net/Tutorials/3DFlippingCircle/
http://tympanus.net/Development/FlipboardPageLayout/
http://tympanus.net/Tutorials/FullscreenGalleryThumbnailFlip/
http://tympanus.net/Tutorials/MoleskineNotebook/

Charts and bar graph
http://tympanus.net/Tutorials/MultipleAreaChartsD3/
http://tympanus.net/Tutorials/Animated3DBarChart/
http://tympanus.net/Tutorials/AnimatedSkillsDiagram/

overlay or Highlight areas for tutorial like gmail new changes
http://tympanus.net/Tutorials/CSS3AnnotationOverlayEffect/
http://tympanus.net/Tutorials/OverlayLikeEffect/#
http://tympanus.net/Tutorials/AnnotationOverlayEffect/
http://tympanus.net/Tutorials/ImageHighlighter/

animated banner
http://tympanus.net/Tutorials/AnimatedWebBanners/
http://tympanus.net/Tutorials/CustomAnimationBanner/

Tooltips
http://tympanus.net/TipsTricks/CSS3Tooltips/

sliding divs
http://tympanus.net/Tutorials/PullOutContentPanel/                      jquery example
http://tympanus.net/Tutorials/RelatedPostsSlideOuts/
http://tympanus.net/Tutorials/LatestPostSlider/
http://tympanus.net/Tutorials/EndPageSlideOutBox/
http://www.tympanus.net/Tutorials/FreshBottomSlideOutMenu/
http://tympanus.net/Tutorials/CSSOverlay/
http://tympanus.net/Tutorials/FixedNavigationTutorial/


news ticker
http://tympanus.net/Tutorials/CompactNewsPreviewer/

table effects with css
http://tympanus.net/Tutorials/CSS3Tables/

image edititng
http://tympanus.net/Tutorials/ImageVampUp/

Comments

  1. CSS Image hover effets

    http://www.corelangs.com/css/box/hover.html

    Ling

    ReplyDelete
  2. We have developed 17 desktop menus, 7 mobile menus and 119 responsive menus (with combination of desktop & mobile menu) and the number will increase by the day. You can also share these menu/ navigation on Facebook, Linkedin, Twitter, etc.

    http://www.uiplayground.in/responsive-menu-navigation/

    ReplyDelete

Post a Comment

Popular posts from this blog

10 jQuery Custom Scrollbar Plugins

10 jQuery Custom Scrollbar Plugins If you ever wanted to add some custom scrollbars to your website, to scroll the contents and the default browser scrollbars just doesn’t match up with your design, than make sure you check this list of 10 jQuery custom scrollbar plugins. Hope you find the following information helpful. 1. jScrollPane – custom cross-browser scrollbars Kelvin Luck’s jScrollPane was originally developed in December 2006. It is a jQuery plugin which provides you with custom scrollbars which work consistently across all modern browsers. You can style the scrollbars using simple CSS and they degrade gracefully where JavaScript is disabled. 2. Plugin JQuery : Scrollbar This page is written in french so use Google’s translate service to translate this page to your preferred language. Download is available for the plugin.  The purpose of this plugin is to add a scrollbar to the item of your choice, to view any content which is larger than the size – vizibl...

List of Best and Worst practices for SEO

Keywords 1 Keywords in <title> tag This is one of the most important places to have a keyword because what is written inside the <title> tag shows in search results as your page title. The title tag must be short (6 or 7 words at most) and the the keyword must be near the beginning. +3 2 Keywords in URL Keywords in URLs help a lot - e.g. -  http://domainname.com/seo-services.html , where “SEO services” is the keyword phrase you attempt to rank well for. But if you don't have the keywords in other parts of the document, don't rely on having them in the URL. +3 3 Keyword density in document text Another very important factor you need to  check . 3-7 % for major keywords is best, 1-2 for minor. Keyword density of over 10% is suspicious and looks more like keyword stuffing, than a naturally written text. +3 4 Keywords in anchor text Also very important, especially for  the anchor text of inbound links , because if you have the...

connect ftp with gridview / display files in gridview from ftp or server

HTML Markup Below is the HTML Markup of the page, where I have an ASP.Net control  FileUpload  to upload files, a  Button control to trigger file uploads and an ASP.Net GridView control to display the files from folder. < asp : FileUpload   ID ="FileUpload1"   runat ="server"   /> < asp : Button   ID ="btnUpload"   runat ="server"   Text ="Upload"   OnClick ="UploadFile"   /> < hr   /> < asp : GridView   ID ="GridView1"   runat ="server"   AutoGenerateColumns ="false"   EmptyDataText   =   "No files uploaded">      < Columns >          < asp : BoundField   DataField ="Text"   HeaderText ="File Name"   />          < asp : TemplateField >              < ItemTempla...