Jump to content

Search the Community

Showing results for tags 'tips'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Informatii generale
    • Anunturi importante
    • Bine ai venit
    • Proiecte RST
  • Sectiunea tehnica
    • Exploituri
    • Challenges
    • Bug Bounty
    • Programare
    • Reverse engineering & exploit development
    • Mobile phones
    • Sisteme de operare si discutii hardware
    • Electronica
    • Wireless Pentesting
    • Black SEO & monetizare
  • Tutoriale
    • Tutoriale in romana
    • Tutoriale in engleza
    • Tutoriale video
  • Programe
    • Programe hacking
    • Programe securitate
    • Programe utile
    • Free stuff
  • Discutii generale
    • RST Market
    • Off-topic
    • Discutii incepatori
    • Stiri securitate
    • Sugestii
    • Linkuri
    • Cosul de gunoi
  • Club Test's Topics
  • Clubul saraciei absolute's Topics
  • Chernobyl Hackers's Topics
  • Programming & Fun's Jokes / Funny pictures (programming related!)
  • Programming & Fun's Programming
  • Programming & Fun's Programming challenges
  • Bani pă net's Topics
  • Cumparaturi online's Topics
  • Web Development's Forum

Categories

There are no results to display.

There are no results to display.

Blogs

There are no results to display.

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Biography


Location


Interests


Occupation

Found 3 results

  1. Salut! Am început de puțin timp să învăț Python cu tutorialele de la Udemy. Precizez că am 22 de ani și aș vrea un job în domeniu pe viitor. Simt că ce au cei de la Udemy nu e suficient.. ce îmi recomandați să studiez pe lângă? (p.s. : mă descurc foarte bine cu engleza) Mersi!
  2. Salutare, Vreau sa fac share la un playlist pe care l-am urmarit in ultima vreme, legat de bug bounty hunting. Recomand atat incepatorilor cat si celor cu exprienta, pentru ca oricand se poate invatat ceva nou, sau pot aparea alte idei. Peter Yaworski, autorul cartii Web Hacking 101(o "culegere" cu cele mai intalnite tipuri de vunerabilitati explicate mai pe scurt, insotite de exemple descoperite "in the wild" in ultimii ani), face o serie de interviuri cu unii dintre cei mai buni bug bounty hunters la ora actuala, regasiti in topul HackerOne sau Bugcrowd. In aceste interviuri aflam cum a inceput fiecare, ce metode si procedee folosesc, si multe altele. Fiecare interviu e diferit, fiecare invitat are stilul si modalitatile lui, asa ca sunt multe lucruri de invatat. Avand in vedere ca majoritatea tintelor pe care le abordeaza au deja o echipa de securitate in spate care gasesc majoritatea problemelor, abilitatea de a construi atacuri creative si "outside the box" e esentiala pentru a gasi probleme critice in sisteme. Playlist-ul aici:
  3. Today we are going to show you how to mask images with shapes plus some nifty zoom animation effects with just HTML & CSS. I have seen this kind of styling and effect in many portfolio websites and let me show you how it's made. Personally, I don't think we should withhold ourself from using new technology or technique such as CSS3 on web projects because of old browsers don't support them. I believe we should "reward" users with modern browser by giving them a better user experiences. Therefore, I enjoy using CSS3 in my projects, but of course, we have to make sure it can degrades gracefully or at least display well in old browsers. This tutorial will be using CSS3 transform which means, old browsers will not show the zooming effect. Good news is, I have coded it, even if it's old browsers, it will still look pretty good and usable. If you want something hardcore, you can check out my previous tutorial - Create Beautiful Hexagon Shape With Pure CSS3. Here are some of the websites that are using the similar way in theirs portfolio page: IMAGES We want this example to be usable in most browsers, therefore, we're not going to draw the shape using CSS3 or whatever fancy techniques. We stick to the ancient way - transparent PNG. This is how each of the shape looks like: HTML To make it easy to understand, I have made an image to illustrate what each layer does. <div class="shape"> <a href="{URL}" class="overlay {round|hexagon|pentagon}"></a> <div class="details"> <span class="heading">{TITLE}</span> <hr /> <p>{DESCRIPTION}</p> <a href="{URL}" class="button">VIEW</a> </div> <div class="bg"></div> <div class="base"> <img src="{IMAGE URL}" alt="" /> </div> </div> In case you need the fonts I used in this tutorial, here is it: <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700' rel='stylesheet' type='text/css'> CSS We don't have Javascript in this tutorial. We use :hover pseudo code and also CSS animation to do simple mouseover and zooming effects. Here is the portion of code that does all these animation effects: ...... .shape .overlay { display:block; width: 310px; height: 310px; position: absolute; top:-5px; left:-5px; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.6s; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.6s; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 0.6s; z-index:500; /* allow user to actually perform actions underneath this layer */ pointer-events:none; background-repeat: no-repeat; } ...... /* hover effect */ .shape:hover .overlay { -webkit-transform: scale(1.07,1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.3s; -moz-transform: scale(1.07,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.3s; } .shape:hover .bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display:block; } .shape:hover .details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index:450; display:block; } ...... Here is the full CSS: .shape { width: 300px; height: 300px; position: relative; } .shape .overlay { display:block; width: 310px; height: 310px; position: absolute; top:-5px; left:-5px; -webkit-transform: scale(1,1); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.6s; -moz-transform: scale(1,1); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.6s; transform: scale(1,1); transition-timing-function: ease-out; transition-duration: 0.6s; z-index:500; /* allow user to actually perform actions underneath this layer */ pointer-events:none; background-repeat: no-repeat; } /* different shapes */ .shape .overlay.round { background: url(round.png); } .shape .overlay.hexagon { background: url(hexagon.png); } .shape .overlay.pentagon { background: url(pentagon.png); } /* hover effect */ .shape:hover .overlay { -webkit-transform: scale(1.07,1.07); -webkit-transition-timing-function: ease-out; -webkit-transition-duration: 0.3s; -moz-transform: scale(1.07,1.07); -moz-transition-timing-function: ease-out; -moz-transition-duration: 0.3s; } .shape:hover .bg { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; display:block; } .shape:hover .details { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; z-index:450; display:block; } /* content styles */ .shape .bg, .shape .details { position: absolute; width: 300px; height:300px; display:table-cell; vertical-align:middle; text-align:center; top:0; left:0; opacity:0; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display:none; } .shape .bg { background: #4b5a78; } .shape .details span.heading { font-family: 'Roboto Condensed', serif; font-size:30px; display:block; margin-top:70px; color:#fff; text-decoration:none; } .shape .details p { font-family: 'Abel', sans-serif; color:#fff; width: 70%; font-size:14px; margin:0 auto; } .shape a.button { padding:5px 15px; font-family: 'Abel', sans-serif; font-size:12px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; background: #2f3644; text-decoration:none; color:#fff; display:block; width:50px; margin:0 auto; text-align:center; margin-top:15px; } .shape a.button:hover { background: #fff; color: #2f3644; } Conclusion That's it, pretty simple to make and look elegant too. You can change the shape to whatever you want. This tutorial is tested on IE8 and should work in most modern browsers. If you have any questions, drop a comment. Demo | Download Source Author: Kevin Liew
×
×
  • Create New...